本篇文章主要使用微信小程序中的request方法為例子
wx.request原始用法
wx.request({
url: 'url', // 這里填寫的接口地址
data: { }, //這里填寫需要傳輸?shù)臄?shù)據(jù)
method: 'POST', // 這里也可以是'GET'
header: {
'content-type': 'application/json', // 默認值
'session': ‘sessionid’ //這里一般可能用不到象迎，通過session來確認用戶身份器腋，比較安全的用法
},
success:function(res) {
console.log(res.data)
}
})
原生request的缺點
首先wx.request是異步請求, JS不會等待 wx.request 執(zhí)行完畢再往下執(zhí)行，所以JS可能會按順序會先執(zhí)行別的方法。
如果我們想要先獲取一個數(shù)據(jù)，然后通過這個返回的數(shù)據(jù)再向服務器獲取另外的數(shù)據(jù)
我們一般的解決方法就是：在回調函數(shù)來再次發(fā)送請求，情況如下：
wx.request({
url: 'url', // 這里填寫的接口地址
data: { }, //這里填寫需要傳輸?shù)臄?shù)據(jù)
method: 'POST', // 這里也可以是'GET'
header: {
'content-type': 'application/json', // 默認值
'session': ‘sessionid’ //這里一般可能用不到五芝，通過session來確認用戶身份，比較安全的用法
},
success:function(res) {
console.log(res.data)
//這里再次發(fā)送請求
wx.request({
url: 'url', // 這里填寫的接口地址
data: { }, //這里填寫需要傳輸?shù)臄?shù)據(jù)
method: 'POST', // 這里也可以是'GET'
header: {
'content-type': 'application/json', // 默認值
'session': ‘sessionid’ //這里一般可能用不到辕万，通過session來確認用戶身份与柑，比較安全的用法
},
success:function(res) {
console.log(res.data)
}
})
}
})
兩個異步函數(shù)嵌套起來谤辜，似乎感覺還不是很亂，但如果4個5個呢价捧？這就是所謂的回調地獄丑念，這樣的代碼讓人看了就頭疼，而且難以維護结蟋。
promise解決回調地獄
promise是什么脯倚？
promise翻譯過來是承諾，它承諾會有一些數(shù)據(jù)會給我們嵌屎；promise是一個對象推正，它代表了一個異步操作，從它可以獲取異步操作的消息宝惰。
promise有三種狀態(tài)：pending(等待)植榕，fulfiled(成功)，rejected(失敗)尼夺，只有異步操作的結果可以決定它是什么狀態(tài)尊残；狀態(tài)一旦改變，就不會再變淤堵，任何時候都可以得到這個結果寝衫。
下面是通過promise封裝的wx.request的案例
//封裝request方法
const reques = (url, method, data) => {
var promise = new Promise((resolve, reject) => {
//提示一下
wx.showLoading({
title: '加載中'
})
//網(wǎng)絡請求
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()
//服務器返回數(shù)據(jù)
if (res.statusCode == 200) {
resolve(res);
} else {
//返回錯誤提示信息
reject(res.data);
}
},
fail: function (e) {
wx.hideLoading()
wx.showToast({
title: '無法連接服務器',
icon: 'loading',
duration: 1000
})
reject('網(wǎng)絡出錯');
}
})
});
return promise;
}
module.exports = {
request:request
}
調用方法
Const tools = require('../../utils/util')
使用方法
tools.request (url,methods ,data).then(res => {
//服務器返回數(shù)據(jù)
console.log('success:',res );
}).catch(res => {
//報錯
console.log('fail:',res);
}).finally(()=>{
//完成
console.log('finally:', "結束");
})
