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

??回調地獄一向是影響開發(fā)和維護的癥結所在弓摘,無數(shù)個success()的嵌套再嵌套陨瘩,導致代碼層級頗深娜膘,盤一次邏輯都要費勁千辛萬苦逊脯,ES6語法中的Promise,便是專為解決JS中異步請求回調的信任問題而存在的劲绪,結合小程序目前提供的API支持男窟,可以用Promise將其進行簡單封裝,優(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)絡通暢颤枪,請求發(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)絡阻塞盗胀,請求發(fā)送失敗艘蹋,顯示錯誤提示
        showError()       //此函數(shù)在下面定義,用于打印錯誤信息
        return reject(res)
      }
      fn(obj) //執(zhí)行函數(shù)票灰,obj為傳入函數(shù)的參數(shù)
    })
  }
}
/**
 * 加載超時后顯示網(wǎng)絡錯誤提示
 * 當前設置為等待2.5秒女阀,若超時后仍未返回請求結果,彈窗提示網(wǎng)絡錯誤
 * @param 傳入一個Promise對象
 */
function racePromise(proRequest){
  return Promise.race([
    proRequest,
    new Promise(function (resolve, reject) {
      setTimeout(() => reject(), 2500)
    })
  ])
}
/**
 * 彈窗提示網(wǎng)絡錯誤
 */
function showError(){
  wx.showModal({
    title: '加載失敗',
    content: '請檢查網(wǎng)絡連接',
    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里的‘判斷狀態(tài)碼’這一步刪掉
const proRequest = util.wxPromisify(wx.request)

??然后在方法里進行調用蚯舱,發(fā)送請求:

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

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

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末臊岸,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子尊流,更是在濱河造成了極大的恐慌帅戒,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,602評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件崖技,死亡現(xiàn)場離奇詭異逻住,居然都是意外死亡,警方通過查閱死者的電腦和手機迎献,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評論 2 382
  • 文/潘曉璐 我一進店門瞎访,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人吁恍,你說我怎么就攤上這事扒秸。” “怎么了践盼?”我有些...
    開封第一講書人閱讀 152,878評論 0 344
  • 文/不壞的土叔 我叫張陵鸦采,是天一觀的道長。 經(jīng)常有香客問我咕幻,道長渔伯,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,306評論 1 279
  • 正文 為了忘掉前任肄程,我火速辦了婚禮锣吼,結果婚禮上,老公的妹妹穿的比我還像新娘蓝厌。我一直安慰自己玄叠,他們只是感情好,可當我...
    茶點故事閱讀 64,330評論 5 373
  • 文/花漫 我一把揭開白布拓提。 她就那樣靜靜地躺著读恃,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上寺惫,一...
    開封第一講書人閱讀 49,071評論 1 285
  • 那天疹吃,我揣著相機與錄音,去河邊找鬼西雀。 笑死萨驶,一個胖子當著我的面吹牛,可吹牛的內容都是我干的艇肴。 我是一名探鬼主播腔呜,決...
    沈念sama閱讀 38,382評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼再悼!你這毒婦竟也來了核畴?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,006評論 0 259
  • 序言:老撾萬榮一對情侶失蹤帮哈,失蹤者是張志新(化名)和其女友劉穎膛檀,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體娘侍,經(jīng)...
    沈念sama閱讀 43,512評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡咖刃,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 35,965評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了憾筏。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片嚎杨。...
    茶點故事閱讀 38,094評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖氧腰,靈堂內的尸體忽然破棺而出枫浙,到底是詐尸還是另有隱情,我是刑警寧澤古拴,帶...
    沈念sama閱讀 33,732評論 4 323
  • 正文 年R本政府宣布箩帚,位于F島的核電站,受9級特大地震影響黄痪,放射性物質發(fā)生泄漏紧帕。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,283評論 3 307
  • 文/蒙蒙 一桅打、第九天 我趴在偏房一處隱蔽的房頂上張望是嗜。 院中可真熱鬧,春花似錦挺尾、人聲如沸鹅搪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,286評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽丽柿。三九已至恢准,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間甫题,已是汗流浹背顷歌。 一陣腳步聲響...
    開封第一講書人閱讀 31,512評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留幔睬,地道東北人。 一個月前我還...
    沈念sama閱讀 45,536評論 2 354
  • 正文 我出身青樓芹扭,卻偏偏與公主長得像麻顶,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子舱卡,可洞房花燭夜當晚...
    茶點故事閱讀 42,828評論 2 345

推薦閱讀更多精彩內容

  • title: promise總結 總結在前 前言 下文類似 Promise#then辅肾、Promise#resolv...
    JyLie閱讀 12,222評論 1 21
  • 前言 最近一直在自學小程序開發(fā),同時也在開發(fā)第一款小程序轮锥,在整個開發(fā)過程中矫钓,小程序給我的開發(fā)體會就是三方類庫太少,...
    monkey01閱讀 10,753評論 3 23
  • 1舍杜、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明先生_x閱讀 15,968評論 3 119
  • 在喜歡的人面前新娜,你選擇扮演一個小丑,默默地表演既绩,你不知道怎么把自己想說的話說給對方聽概龄,只有憋在心里,獨自憂慮饲握。有時...
    Zincredible閱讀 204評論 0 0
  • 第一次測試私杜,用來粘接線圈的Hasuncast6286 雙組分環(huán)氧樹脂膠。 測試結果:太脆救欧。 -----------...
    hydro閱讀 186評論 0 0