提供微商城·微分销·小程序开店需求
5分钟开通你的微信商城店铺!2020-09-28 作者:黄保
微信小程序开发点击按钮已经是当下最热门的话题,下面将从多方面来谈微信小程序开发点击按钮相关的内容。
在互联网应用中,我们经常用到的场景,比如用户点击某个按钮,触发的操作会和后台api进行数据交互,生成一些记录,比如下单购买。如果后台api请求比较慢,而客户端体验又做得不到位,导致用户以为没点击到或者是页面假死,在上次请求还没处理完,就再次点击按钮。这样会导致某个操作生成多次记录,导致一些异常的bug。
很显然,后台的api在这方面是需要做好处理。然而,面对用户,我们需要更好的体验,可以在客户端去避免这些问题,前置地解决问题。
最近听产品经理常说,用户点击某个按钮多次,后台还没处理完导致多笔记录生成,我们需要在用户点击后跳转到一个新的页面,其实这根本不是跳页问题,是程序问题。如果程序员真这么干,是不是要下岗了。
以前偷懒的时候,在前端我们可能会这么处理:
var getUserDataFlag = false;
function getUserData() {
if (getDataFlag) {
return;
}
getDataFlag = true;
$.ajax({
url: '/xxx/getUser',
success: function () {
getUserData = false;
//todo
},
error: function () {
getUserData = false;
}
})
}
//当接口很多的时候,我们的代码就变成这样
var getUserAssetFlag = true;
function getUserAsset() {
if (getDataFlag) {
return;
}
getDataFlag = true;
$.ajax({
url: '/xxx/getUserAsset',
success: function () {
getUserAssetFlag = false;
//todo
},
error: function () {
getUserAssetFlag = false;
}
})
}
上面的例子你会发现,当接口越来越多,维护请求状态的变量将会越来越多,并且当存在依赖时,维护成本更高,也更容易出错。
如何优雅地解决这样的问题,其实封装一下请求就能简单又能自动地处理这个问题。
下面我们以微信小程序请求后台数据为例解说:
import {isObject} from './util'
let Promise = require('../libs/bluebird.min')
let requestList = {} //api请求记录
// 将当前请求的api记录起来
export function addRequestKey (key) {
requestList[key] = true
}
// 将请求完成的api从记录中移除
export function removeRequestKey (key) {
delete requestList[key]
}
//当前请求的api是否已有记录
export function hitRequestKey (key) {
return requestList[key]
}
// 获取串行请求的key,方便记录
export function getLockRequestKey (data) {
if (!isObject(data)) {
return data
}
let ajaxKey = 'lockRequestKey:'
try {
ajaxKey += JSON.stringify(data)
} catch (e) {
ajaxKey += data
}
return ajaxKey
}
//根据请求的地址,请求参数组装成api请求的key,方便记录
export function getRequestKey (data) {
if (!isObject(data)) {
return data
}
let ajaxKey = 'Method: ' + data.method + ',Url: ' + data.url + ',Data: '
try {
ajaxKey += JSON.stringify(data.data)
} catch (e) {
ajaxKey += data.data
}
return ajaxKey
}
//所有与服务器进行http请求的出口
export function http (data) {
if (!isObject(data)) {
throw Error('ajax请求参数必须是json对象: ' + data)
}
data.method = (data.method || 'GET').toUpperCase()
//下面5行是对所有http请求做防重复请求处理,后面单独分享原理
let ajaxKey = getRequestKey(data)
if (hitRequestKey(ajaxKey)) {
throw Error('重复提交请求:' + ajaxKey)
}
addRequestKey(ajaxKey)
//bluebird.js包装成promisepromise api
return new Promise(function (resolve, reject) {
//通过wx.request api 向服务器端发出http请求
wx.request({
url: data.url,
data: data.data,
method: data.method,
header: data.header || {'Content-Type': 'application/json'},
complete: function (res) {
// 请求完成,释放记录的key,可以发起下次请求了
removeRequestKey(ajaxKey)
let statusCode = res.statusCode
if (statusCode === 200 || statusCode === 304) {
return resolve(res.data)
}
return reject(res)
}
})
})
}
//通用get请求方法
export function httpGet (data) {
return http(data)
}
//通用post请求方法
export function httpPost (data) {
data.method = 'POST'
return http(data)
}
// 该方法适用于串行请求的api
export function lockRequest (data, fn) {
let ajaxKey = getLockRequestKey(data)
if (hitRequestKey(ajaxKey)) {
throw Error('重复提交请求:' + ajaxKey)
}
addRequestKey(ajaxKey)
return new Promise(function (resolve, reject) {
fn(data)
.then(function (data) {
removeRequestKey(ajaxKey)
return resolve(data)
})
.catch(function (error) {
removeRequestKey(ajaxKey)
return reject(error)
})
})
}
整体思路就是统一所有请求的入口,然后以API请求的地址,参数,请求类型(get,post)等组装为唯一key缓存起来。这样就能知道某个请求的完成状态,当第二个相同的请求过来时,我们可以根据上一次的状态来判断下一步的操作。
微信小程序商城系统开发其实很简单,只需要五步就可以完成,整个过程包括开发、上线、发布都可以轻松搞定...详情
推荐文章
微信小程序滚动字幕已经是当下微信小程序开发最热门的话题,下面将从多方面来谈谈微信小程序滚动字幕及弹幕的实现技巧...
2017年6月14日,微信小程序开发教程已经是当下最热门的话题,下面将从多方面来谈谈Array数组对象相关的内容。...
最近在微信社群都可以看到拼多多的拆红包的界面,这又是一款拼多多的裂变营销方式,很多朋友对此表示很怀疑,到底是不...
Hishop最新消息,有这样一个小程序可以无需询问,就知道朋友的位置了,那么是如何定位分享位置的呢。...
目前最好最受欢迎的收银系统品牌有HiShop友数、商米等,每个品牌都有各自的特点和主要发展的行业,下面小编就为大家来介...
餐饮行业是国内规模万亿级别的市场,如今市面上的餐饮品牌门店数不胜数,在如今这个互联网时代,许许多多餐饮门店都开...
连锁超市在选择收银系统的时候,首先会考虑到收银系统的操作便捷,能够给收银员的工作提升效率的同时,避免出现错误,...
超市收银系统百科 超市收银系统是零售业中用于处理销售交易的关键技术,它不仅提高了结账效率,还增强了顾客的购物体...
酒吧收银系统百科 1. 酒吧收银系统概述 酒吧收银系统是专为酒吧、夜店等娱乐场所设计的一套集成化管理软件,它能够实现...
生鲜超市收银系统十大品牌有哪些呢?下面小编就为大家来讲解一下各收银系统的特...