本篇文章主要使用微信小程序中的request方法为例子
wx.request原始用法
wx.request({
url: 'url', // 这里填写的接口地址
data: { }, //这里填写需要传输的数据
method: 'POST', // 这里也可以是'GET'
header: {
'content-type': 'application/json', // 默认值
'session': ‘sessionid’ //这里一般可能用不到，通过session来确认用户身份，比较安全的用法
},
success:function(res) {
console.log(res.data)
}
})
原生request的缺点
首先wx.request是异步请求, JS不会等待 wx.request 执行完毕再往下执行，所以JS可能会按顺序会先执行别的方法。
如果我们想要先获取一个数据，然后通过这个返回的数据再向服务器获取另外的数据
我们一般的解决方法就是：在回调函数来再次发送请求，情况如下：
wx.request({
url: 'url', // 这里填写的接口地址
data: { }, //这里填写需要传输的数据
method: 'POST', // 这里也可以是'GET'
header: {
'content-type': 'application/json', // 默认值
'session': ‘sessionid’ //这里一般可能用不到，通过session来确认用户身份，比较安全的用法
},
success:function(res) {
console.log(res.data)
//这里再次发送请求
wx.request({
url: 'url', // 这里填写的接口地址
data: { }, //这里填写需要传输的数据
method: 'POST', // 这里也可以是'GET'
header: {
'content-type': 'application/json', // 默认值
'session': ‘sessionid’ //这里一般可能用不到，通过session来确认用户身份，比较安全的用法
},
success:function(res) {
console.log(res.data)
}
})
}
})
两个异步函数嵌套起来，似乎感觉还不是很乱，但如果4个5个呢？这就是所谓的回调地狱，这样的代码让人看了就头疼，而且难以维护。
promise解决回调地狱
promise是什么？
promise翻译过来是承诺，它承诺会有一些数据会给我们；promise是一个对象，它代表了一个异步操作，从它可以获取异步操作的消息。
promise有三种状态：pending(等待)，fulfiled(成功)，rejected(失败)，只有异步操作的结果可以决定它是什么状态；状态一旦改变，就不会再变，任何时候都可以得到这个结果。
下面是通过promise封装的wx.request的案例
//封装request方法
const reques = (url, method, data) => {
var promise = new Promise((resolve, reject) => {
//提示一下
wx.showLoading({
title: '加载中'
})
//网络请求
wx.request({
url: url,
data: data,
method: method,
header: {
'Content-Type': 'application/x-www-form-urlencoded',//这是python后台使用的
'Cookie': 'sessionid=' + getApp().globalData.cookie //这是我保存在全局变量中的的sessionid
},
success: function (res) {
wx.hideLoading()
//服务器返回数据
if (res.statusCode == 200) {
resolve(res);
} else {
//返回错误提示信息
reject(res.data);
}
},
fail: function (e) {
wx.hideLoading()
wx.showToast({
title: '无法连接服务器',
icon: 'loading',
duration: 1000
})
reject('网络出错');
}
})
});
return promise;
}
module.exports = {
request:request
}
调用方法
Const tools = require('../../utils/util')
使用方法
tools.request (url,methods ,data).then(res => {
//服务器返回数据
console.log('success:',res );
}).catch(res => {
//报错
console.log('fail:',res);
}).finally(()=>{
//完成
console.log('finally:', "结束");
})
