微信提供了api，开发者可以通过wx.request来获取服务器的数据和传递数据。虽然api提供了很大的方便，但是调用多个接口时，代码重复性太高，我们可以进一步封装。
将官方文档中wx.request的参数贴上，方便阅读
新建文件request.js，将请求的封装方法写在里面
//var hasClick = false;
const http = (method, url, data, response, error) => {
if (hasClick) {
return
}
// hasClick = true
wx.showLoading({
title: '加载中...',
mask: true
})
wx.request({
method: method,
url: url,
header: {
'content-type': 'application/json'
// 'token': wx.getStorageSync("token")
},
data:data,
success: res => {
return response(res)
},
fAIl: err => {
return error(err)
},
complete: info => {
wx.hideLoading();
// hasClick = false
}
})
}
module.exports = {
_get: (url, data, response, error) => http('GET', url, data, response, error),
_post: (url, data, response, error) => http('POST', url, data, response, error),
_put: (url, data, response, error) => http('PUT', url, data, response, error),
_delete: (url, data, response, error) => http('DELETE', url, data, response, error),
}
-
当发起请求的时候，界面出现“加载中...”的Loading界面，请求完成后，取消加载loading。设置加载loading的mask属性为true，可以显示透明蒙层，防止触摸穿透。
-
有遮罩还不够，某些情况下可能会发生多次请求（用户迅速的点击两次请求按钮，在遮罩层未出来之前）。比如在点击支付的时候，由于调用支付前的误操作，支付完成后再次弹出一个支付框，会给用户带来非常不好的体验。
可以在封装方法中加一个hasClick的“锁”，在开始请求前检查是否已经发起过请求，如果没有才发起这次请求，等到请求返回之后再把锁的状态恢复回去。
页面调用，在页面的js文件中引用
import request from '../../request/request.js'
request(){
let data = {
params1:params1, //参数1
params2:params2, //参数2
}
request._get('http://192.168.1.30:8085/banner', data , res => {
console.log(res)
},err => {
console.log(err)
})
},
- 如果没有请求参数，把data换成null就好
小程序默认请求超时时间是60秒，等待时间有点长，我们可以在app.json中进行设置
{
//...
"networkTimeout": {
"request": 5000
}
}
每个页面请求的时候都要引用封装，还是有点麻烦。注意到小程序页面都可以获取app.js的实例（const app = getApp()），所以可以改一下封装，将封装方法直接暴露出去，在app.js中再配置POST/GET等请求；请求的url也可以抽出来写在一起，方便查找和修改。自己试一下吧~
