小程序promise封装post请求_Promise封装微信小程序的Request请求
回調地獄一向是影響開發和維護的癥結所在，無數個success()的嵌套再嵌套，導致代碼層級頗深，盤一次邏輯都要費勁千辛萬苦，ES6語法中的Promise，便是專為解決JS中異步請求回調的信任問題而存在的，結合小程序目前提供的API支持，可以用Promise將其進行簡單封裝，優化性能體驗。具體代碼如下(注意看注釋)：
1. 首先在公共的util.js(或者自己創建的公有JS文件)中加入如下方法：
/**
* wxPromisify 使用promise封裝request請求
* @fn 傳入的函數，如wx.request、wx.download
*/
function wxPromisify(fn) {
return function(obj = {}) {
return new Promise((resolve, reject) => {
obj.success = function(res) { //網絡通暢，請求發送成功
console.log(res)
if (res.data.code == 200) { //判斷后臺返回的狀態碼，若是成功，返回resolve()
return resolve(res)
} else { //若是返回錯誤的狀態碼，彈窗提示失敗信息，并附帶錯誤代碼，以便快速定位問題所在
wx.showModal({
title: res.data.msg,
content: "錯誤碼：" + res.data.code,
showCancel: false,
})
}
}
obj.fail = function(res) { //網絡阻塞，請求發送失敗，顯示錯誤提示
showError() //此函數在下面定義，用于打印錯誤信息
return reject(res)
}
fn(obj) //執行函數，obj為傳入函數的參數
})
}
}
/**
* 加載超時后顯示網絡錯誤提示
* 當前設置為等待2.5秒，若超時后仍未返回請求結果，彈窗提示網絡錯誤
* @param 傳入一個Promise對象
*/
function racePromise(proRequest){
return Promise.race([
proRequest,
new Promise(function (resolve, reject) {
setTimeout(() => reject(), 2500)
})
])
}
/**
* 彈窗提示網絡錯誤
*/
function showError(){
wx.showModal({
title: '加載失敗',
content: '請檢查網絡連接',
showCancel: false,
})
}
最后將方法導出：
module.exports = {
URL: "https://...", //具體的請求地址頭
wxPromisify: wxPromisify,
racePromise: racePromise,
showError: showError,
}
2. 在wxml中進行調用，首先在Page上方引入util.js文件，并封裝部分方法：
const util = require('../../utils/util.js')
//調用util.js里寫好的方法，將小程序原生的request方法包裝成一個Promise對象
//這里也可以傳入其他原生請求，如wx.getSystemInfo、wx.getUserInfo、wx.login等，但需要將util.js里的‘判斷狀態碼’這一步刪掉
const proRequest = util.wxPromisify(wx.request)
然后在方法里進行調用，發送請求：
/**
* 通過code獲取用戶openid
*/
getOpenid(code) {
var that = this; //個人習慣，為避免this指向出錯，函數前必加
util.racePromise(proRequest({
url: util.URL + "...?code=" + code, //請求地址
method: 'POST', //函數方法
})).then(res => { //！！！注意括號的個數！！！
/* ... */ //若是請求成功，執行后續處理和操作 res是請求響應的結果
}).catch(res => { //若是請求超時，則catch進行捕獲，彈窗提示網絡錯誤
util.showError()
})
},
以上便是簡單的封裝方法，并處理了基本錯誤，后續可以根據需求添加Promise.all等方法，完善業務邏輯。
如有不妥之處，萬望指正！
總結
以上是生活随笔為你收集整理的小程序promise封装post请求_Promise封装微信小程序的Request请求的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java rhino 运行 js_Moz
- 下一篇： 怎么捡自己空投_使命召唤手游空投怎么快速