Promise封裝微信小程序的Request請求

??回調(diào)地獄一向是影響開發(fā)和維護(hù)的癥結(jié)所在,無數(shù)個success()的嵌套再嵌套,導(dǎo)致代碼層級頗深,盤一次邏輯都要費(fèi)勁千辛萬苦,ES6語法中的Promise,便是專為解決JS中異步請求回調(diào)的信任問題而存在的,結(jié)合小程序目前提供的API支持,可以用Promise將其進(jìn)行簡單封裝,優(yōu)化性能體驗。具體代碼如下(注意看注釋)
??1. 首先在公共的util.js(或者自己創(chuàng)建的公有JS文件)中加入如下方法:

/**
 * wxPromisify 使用promise封裝request請求
 * @fn 傳入的函數(shù),如wx.request、wx.download
 */
function wxPromisify(fn) {
  return function(obj = {}) {
    return new Promise((resolve, reject) => {
      obj.success = function(res) {  //網(wǎng)絡(luò)通暢,請求發(fā)送成功
        console.log(res)
        if (res.data.code == 200) {  //判斷后臺返回的狀態(tài)碼,若是成功,返回resolve()
          return resolve(res)
        } else {     //若是返回錯誤的狀態(tài)碼,彈窗提示失敗信息,并附帶錯誤代碼,以便快速定位問題所在
          wx.showModal({
            title: res.data.msg,
            content: "錯誤碼:" + res.data.code,
            showCancel: false,
          })
        }
      }
      obj.fail = function(res) {    //網(wǎng)絡(luò)阻塞,請求發(fā)送失敗,顯示錯誤提示
        showError()       //此函數(shù)在下面定義,用于打印錯誤信息
        return reject(res)
      }
      fn(obj) //執(zhí)行函數(shù),obj為傳入函數(shù)的參數(shù)
    })
  }
}
/**
 * 加載超時后顯示網(wǎng)絡(luò)錯誤提示
 * 當(dāng)前設(shè)置為等待2.5秒,若超時后仍未返回請求結(jié)果,彈窗提示網(wǎng)絡(luò)錯誤
 * @param 傳入一個Promise對象
 */
function racePromise(proRequest){
  return Promise.race([
    proRequest,
    new Promise(function (resolve, reject) {
      setTimeout(() => reject(), 2500)
    })
  ])
}
/**
 * 彈窗提示網(wǎng)絡(luò)錯誤
 */
function showError(){
  wx.showModal({
    title: '加載失敗',
    content: '請檢查網(wǎng)絡(luò)連接',
    showCancel: false,
  })
}

??最后將方法導(dǎo)出:

module.exports = {
  URL: "https://...",   //具體的請求地址頭
  wxPromisify: wxPromisify,
  racePromise: racePromise,
  showError: showError,
}

??2. 在wxml中進(jìn)行調(diào)用,首先在Page上方引入util.js文件,并封裝部分方法:

const util = require('../../utils/util.js')
//調(diào)用util.js里寫好的方法,將小程序原生的request方法包裝成一個Promise對象
//這里也可以傳入其他原生請求,如wx.getSystemInfo、wx.getUserInfo、wx.login等,但需要將util.js里的‘判斷狀態(tài)碼’這一步刪掉
const proRequest = util.wxPromisify(wx.request)

??然后在方法里進(jìn)行調(diào)用,發(fā)送請求:

/**
 * 通過code獲取用戶openid
 */
getOpenid(code) {
  var that = this;    //個人習(xí)慣,為避免this指向出錯,函數(shù)前必加
  util.racePromise(proRequest({
    url: util.URL + "...?code=" + code,  //請求地址
    method: 'POST',    //函數(shù)方法
  })).then(res => {    //!!!注意括號的個數(shù)!!!
    /* ... */          //若是請求成功,執(zhí)行后續(xù)處理和操作  res是請求響應(yīng)的結(jié)果
  }).catch(res => {    //若是請求超時,則catch進(jìn)行捕獲,彈窗提示網(wǎng)絡(luò)錯誤
    util.showError()
  })
},

??以上便是簡單的封裝方法,并處理了基本錯誤,后續(xù)可以根據(jù)需求添加Promise.all等方法,完善業(yè)務(wù)邏輯。
??如有不妥之處,萬望指正!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • title: promise總結(jié) 總結(jié)在前 前言 下文類似 Promise#then、Promise#resolv...
    JyLie閱讀 12,281評論 1 21
  • 前言 最近一直在自學(xué)小程序開發(fā),同時也在開發(fā)第一款小程序,在整個開發(fā)過程中,小程序給我的開發(fā)體會就是三方類庫太少,...
    monkey01閱讀 10,789評論 3 23
  • 1、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明AGI閱讀 16,003評論 3 119
  • 在喜歡的人面前,你選擇扮演一個小丑,默默地表演,你不知道怎么把自己想說的話說給對方聽,只有憋在心里,獨(dú)自憂慮。有時...
    Zincredible閱讀 214評論 0 0
  • 第一次測試,用來粘接線圈的Hasuncast6286 雙組分環(huán)氧樹脂膠。 測試結(jié)果:太脆。 -----------...
    hydro閱讀 192評論 0 0