小程序request封裝（success、fail、finnaly回調）

最近作了兩個小程序，業務相對比較簡單，關於公益方面的，收穫頗多，其中感受在開發中明顯提高開發效率以及減小代碼量的就是request的封裝，下面稍稍作個總結。

---

通用封裝

在utils文件夾下新建兩個文件，config.js以及request.js,代碼分別以下。

//`config.js`---一些全局變量
module.exports = {
appid: "wxcXXXXXXXXXXXXXX349f",
API_BASE_URL: 'https://liugezhou.github.io/',//暫時測試環境地址、上線須要修改
}

`request`---request封裝
const CONFIG = require("./config.js")
const request = (url,method,data) => {
  let _url = CONFIG.API_BASE_URL+url
  return new Promise((resolve ,reject)=>{
    wx.request({
      url: _url,
       method:method,
      data:data,
      header: {
        'content-type': 'application/json' // 默認值
      },
      success(request) {
        resolve(request.data)
      },
      fail(error) {
        reject(error)
      },
      complete(aaa) {
        // 加載完成
      }
    })
  })
}
/**
 * 小程序的promise沒有finally方法，本身擴展下
 */
Promise.prototype.finally = function (callback) {
  var Promise = this.constructor;
  return this.then(
    function (value) {
      Promise.resolve(callback()).then(
        function () {
          return value;
        }
      );
    },
    function (reason) {
     Promise.resolve(callback()).then(
        function () {
          throw reason;
        }
      );
    }
  );
}


  //全部接口定義在這裏
module.exports = {
  request,
  //app.js登陸
  login:(data) => {
    return request('WeChat/Login.aspx','POST',data)
  },
  //獲取驗證碼
  getMessageCode: (mobile) => {
    return request('Donor/DonorPhoneCode.aspx?'+mobile,'POST')
  },
  ……
}
複製代碼

經過上面兩個小文件咱們就將request封裝完畢，在業務層調用代碼的時候只須要：

const REQUEST = require('../../utils/request.js');
…………………………………………
var that =this
    REQUEST.login({
      tokenkey: res.code
    }).then(function(res){
         that.globalData.openId = res.data.tokenkey
         that.globalData.isBind = res.code
    }).catch(res => {//catch  fail在這裏
        console.log('fail:',res); 
      }).finally(()=>{//finally在這裏
       console.log('finally:', "結束"); 
      })
………………………………………
複製代碼

隊列封裝（不經常使用）

通常狀況下，上面的封裝咱們按着本身的需求稍微修改就應該能夠方便使用。 接下來介紹的一種是接口隊列化封裝。由於在咱們的開發需求中，每一次接口的請求須要上一個接口返回的兩個數據，所以稍做整理以下：

//request.js
const CONFIG = require("./config.js")
let requestlist = [];
let doing = false;
const request = (link, data, back) => {
  var link = CONFIG.API_BASE_URL + link
  requestlist.push({ link: link, data: data, back: back })
  if (!doing) dorequest();
}
const dorequest = () => {

  doing = true
  let task = requestlist.shift();
  if (task) {
    wx.request({
      url: task.link,
      data: Object.assign({
         seq : wx.getStorageSync("seq") || '',
         token : wx.getStorageSync("token") || '',
         openid : wx.getStorageSync("openId") || ''}, task.data),
      method: 'POST',
      header: {
        'content-type': 'application/json' // 默認值
      },
      success: res => {
        wx.setStorageSync("seq", res.data.seq)
        wx.setStorageSync("token", res.data.token)
        task.back(res.data);
        dorequest();
      },
      fail:function(){
        wx.showToast({
          title: '服務器出現故障',
          image: '../../assets/icon/wrong.png',
          duration: 3000
        })
      },
      complete:function(){
      }
    });
  }
    else {
    doing = false;
  }

};

module.exports = {
  request,
  //獲取用戶openid
  getOpenid: (data,res) => {
    return request('get-wx-openid',data,res)
  },
  //獲取驗證碼
  getLoginCode: (data,res) => {
    return request('send-phone-code', data, res)
  }
}複製代碼