微信小程序開發——使用promise封裝異步請求

前言：

有在學vue的網友問如何封裝網絡請求，這里以正在寫的小程序為例，做一個小程序的請求封裝。

關於小程序發起 HTTPS 網絡請求的Api,詳情可以參考官方文檔：wx.request(Object object)。

如果直接使用官方提供的個Api，那么每次在進行網絡請求調用時，我們都要按官方文檔上說的那樣傳遞需要設置的請求參數，然后對不同的請求相應結果做不同的處理。但是前端同服務器端的接口請求中有大部分的請求參數以及響應結果處理都是很類似的，也就沒有必要對所有請求代碼都重新敲敲一遍，那么對原生的網絡請求進行封裝就有必要了。

網絡請求封裝：

如果接口比較多，可以創建兩個文件，完成網絡請求的封裝：

1. http.js

/**
 * 封裝http 請求方法
 */
const apiUrl = "https://www.xxx.cn"; //服務器api地址
const http = (params) => {
  //返回promise 對象
  return new Promise((resolve, reject) => {
    wx.request({
      url: apiUrl + params.url,//服務器url+參數中攜帶的接口具體地址
      data: params.data,//請求參數
      header: params.header || {
        "Content-Type": "application/x-www-form-urlencoded"//設置后端需要的常用的格式就好，特殊情況調用的時候單獨設置
      },
      method: params.method || 'POST',//默認為GET,可以不寫，如常用請求格式為POST，可以設置POST為默認請求方式
      dataType: params.dataType,//返回的數據格式,默認為JSON，特殊格式可以在調用的時候傳入參數
      responseType: params.responseType,//響應的數據類型
      success: function(res) {
        //接口訪問正常返回數據
        if (res.statusCode == 200) {
          //1. 操作成功返回數據,原則上只針對服務器端返回成功的狀態（如本例中為000000）
          if (res.data.retCode == "000000") {
            resolve(res.data)
          } else if(params.url == "/order/result" && res.data.retCode == "800020") {//支付結果未知      
            //需要特殊處理的接口，可以單獨列出來返回數據
            resolve(res.data)
          } else {
            wx.showToast({
              icon: "none",
              title: res.data.retMsg
            })
            console.log(res.data)
          }
        } else {
          //2. 操作不成功返回數據，以toast方式彈出響應信息，如后端未格式化非操作成功異常信息，則可以統一定義異常提示
          var errMsg = res.data.message
          errorToast();
          console.log(res.data)
        }
      },
      fail: function(e) {
        errorToast();
        reject(e)
      }
    })
  })
}
module.exports = {
  http: http
}

注：上邊代碼中已經注釋比較詳細了，就不再贅述了。

2. api.js

import {
  http
} from '../utils/util.js'

var url = {
  userLogin: "/user/login", 
  getUserPhone: "/user/phone", 
  ...
  userCardReceive: "/card/receive" 
}
module.exports = {
  userLogin(code) {
    return http({      
      url: url.userLogin,
      data: { code: code},
      header: {
        "Content-Type": "application/x-www-form-urlencoded"
      }
    })
  },
  getUserPhone(params) {
    return http({
      url: url.getUserPhone,
      data: params
    })
  },
  ...
  userCardReceive() {
    return http({
      url: url.userCardReceive,
      method:"GET"
    })
  },
}

注：以函數封裝請求，並以回調函數的方式返回請求結果。具體參數可根據需要單獨設置。

調用方式：

      http.getUserPhone(params).then(data => {
        if (data) {
            //返回結果的處理邏輯
            ...
        }
      })        

個人原創博客，轉載請注明來源地址：https://www.cnblogs.com/xyyt/p/9715367.html