本篇文章主要使用微信小程序中的request方法為例子

wx.request原始用法

 wx.request({
     url: 'url', // 這里填寫的接口地址
     data: { }, //這里填寫需要傳輸?shù)臄?shù)據(jù)
     method: 'POST',  // 這里也可以是'GET'
      header: {
        'content-type': 'application/json', // 默認(rèn)值
        'session': ‘sessionid’  //這里一般可能用不到，通過session來確認(rèn)用戶身份，比較安全的用法
      },
  success:function(res) {
    console.log(res.data)
  }
})

原生request的缺點(diǎn)

首先wx.request是異步請(qǐng)求, JS不會(huì)等待 wx.request 執(zhí)行完畢再往下執(zhí)行，所以JS可能會(huì)按順序會(huì)先執(zhí)行別的方法。
如果我們想要先獲取一個(gè)數(shù)據(jù)，然后通過這個(gè)返回的數(shù)據(jù)再向服務(wù)器獲取另外的數(shù)據(jù)
我們一般的解決方法就是：在回調(diào)函數(shù)來再次發(fā)送請(qǐng)求，情況如下：

   wx.request({
     url: 'url', // 這里填寫的接口地址
     data: { }, //這里填寫需要傳輸?shù)臄?shù)據(jù)
     method: 'POST',  // 這里也可以是'GET'
     header: {
        'content-type': 'application/json', // 默認(rèn)值
        'session': ‘sessionid’  //這里一般可能用不到，通過session來確認(rèn)用戶身份，比較安全的用法
      },
     success:function(res) {
         console.log(res.data)
         //這里再次發(fā)送請(qǐng)求
         wx.request({
            url: 'url', // 這里填寫的接口地址
            data: { }, //這里填寫需要傳輸?shù)臄?shù)據(jù)
            method: 'POST',  // 這里也可以是'GET'
            header: {
                'content-type': 'application/json', // 默認(rèn)值
                'session': ‘sessionid’  //這里一般可能用不到，通過session來確認(rèn)用戶身份，比較安全的用法
              },
            success:function(res) {
             console.log(res.data)
          }
        })
  }
})   

兩個(gè)異步函數(shù)嵌套起來，似乎感覺還不是很亂，但如果4個(gè)5個(gè)呢？這就是所謂的回調(diào)地獄，這樣的代碼讓人看了就頭疼，而且難以維護(hù)。

promise解決回調(diào)地獄

promise是什么？
promise翻譯過來是承諾，它承諾會(huì)有一些數(shù)據(jù)會(huì)給我們；promise是一個(gè)對(duì)象，它代表了一個(gè)異步操作，從它可以獲取異步操作的消息。
promise有三種狀態(tài)：pending(等待)，fulfiled(成功)，rejected(失敗)，只有異步操作的結(jié)果可以決定它是什么狀態(tài)；狀態(tài)一旦改變，就不會(huì)再變，任何時(shí)候都可以得到這個(gè)結(jié)果。
下面是通過promise封裝的wx.request的案例

 //封裝request方法
const reques = (url, method, data) => {
var promise = new Promise((resolve, reject) => {
    //提示一下
    wx.showLoading({
      title: '加載中'
    })
    //網(wǎng)絡(luò)請(qǐng)求
    wx.request({
        url: url,
        data: data,
        method: method,
        header: {
            'Content-Type': 'application/x-www-form-urlencoded',//這是python后臺(tái)使用的
            'Cookie': 'sessionid=' + getApp().globalData.cookie //這是我保存在全局變量中的的sessionid
        },
        success: function (res) {
            wx.hideLoading()
            //服務(wù)器返回?cái)?shù)據(jù)
            if (res.statusCode == 200) {
                resolve(res);
            } else {
                //返回錯(cuò)誤提示信息
                reject(res.data);
            }
        },
        fail: function (e) {
            wx.hideLoading()
            wx.showToast({
              title: '無法連接服務(wù)器',
              icon: 'loading',
              duration: 1000
            })
            reject('網(wǎng)絡(luò)出錯(cuò)');
        }
})
});
    return promise;
}

module.exports = {
    request:request
}

調(diào)用方法

Const tools = require('../../utils/util')

使用方法

tools.request (url,methods ,data).then(res => {
  //服務(wù)器返回?cái)?shù)據(jù)
  console.log('success:',res );
}).catch(res => {
    //報(bào)錯(cuò)
    console.log('fail:',res);
}).finally(()=>{
    //完成
   console.log('finally:', "結(jié)束");
})