導(dǎo)語：

當(dāng)我們進(jìn)行微信小程序開發(fā)的時候，會經(jīng)常涉及到發(fā)送網(wǎng)絡(luò)請求來進(jìn)行后臺數(shù)據(jù)交互，而在微信小程序中，用來 發(fā)送請求的方法是 wx.request() , 但是由于 wx.request() 方法 不支持 Promise 風(fēng)格的調(diào)用，所以導(dǎo)致 wx.request() 用來發(fā)送異步請求的時候，會觸發(fā)成回調(diào)地獄的表現(xiàn), 以及會產(chǎn)生很多冗余的代碼，會重復(fù)編寫相同的參數(shù)配置項，如果業(yè)務(wù)邏輯再復(fù)雜一點，就會使整個項目代碼可維護(hù)性 降低。
所以本章節(jié)，就針對于，上述提出的問題，以及 wx.request() 方法的缺點，來對 wx.request() 進(jìn)行基于 Promise 風(fēng)格封裝。

提示：
本章節(jié)由于是基于 Promise 進(jìn)行的封裝，所以如果有小伙伴還不太了解 ES6 的 Promise , 建議先去了解下 Promise相關(guān)的知識，這對我們是很有幫助的。點擊去學(xué)習(xí) Promise

封裝思路：

以簡化不必要的代碼配置項為主要目的，對于公用的請求地址做關(guān)聯(lián)處理，同時為了保證接口封裝后的靈活性，對請求方法的一些配置項采取外部傳入的形式做處理。然后再以 Promise 風(fēng)格進(jìn)行異步處理。

1. 首先第一步，在我們的項目中的 utils 文件夾下面創(chuàng)建 一個 js 文件（utils 文件夾常用來存放 一些封裝的工具類函數(shù)）用來存放我們封裝的 wx.request() 請求方法。

const baseURL = 'https://www.mxnzp.com'; //公用總路徑地址


export const request = (params) => {      //暴露出去一個函數(shù)，并且接收一個外部傳入的參數(shù)

  let dataObj = params.data || {};   //拿到傳遞進(jìn)來的參數(shù)
  let headerObj = {                  //這里 可以添加一些請求頭
    'content-type': 'application/json'
  }

  return new Promise((resolve, reject) => {  //通過 Promise 對 wx.request 方法進(jìn)行異步處理。
    wx.request({
      url: baseURL + params.url,      //通過默認(rèn)的請求地址，再加上外部傳入的 具體業(yè)務(wù)地址，組成一個完整的 請求地址。
      method: params.method || "GET",   //外部 業(yè)務(wù)調(diào)用請求時，并傳入 所需的請求方法，如果沒有傳遞請求方法，則默認(rèn)為 GET 請求
      data: dataObj,                  //這里的參數(shù)，來自于外部傳入的參數(shù)
      header: headerObj,
      success: res => {
        if (res.statusCode === 200) {
          resolve(res);                      // 請求成功后，調(diào)用 Promise 的回調(diào) resolve() 方法，將參數(shù)返回出去到 Promise 的實例對象身上。
          wx.showToast({
            title: "請求成功",
            icon: "success"
          })
          return;
        } else {
          wx.showToast({
            title: "請求失敗",
            icon: "error"
          })
          reject(res);               //同樣請求失敗后，向 Promise 實例返回出 錯誤的信息
        }
      },
      fail: err => {
        reject(err)            //同樣請求失敗后，向 Promise 實例返回出 錯誤的信息
      }
    })
  })
}

2. 在項目中，新建一個 api 文件夾，用來做請求接口 模塊化管理，這么做的原因是，雖然我們的請求接口封裝了，但是整個項目中，調(diào)用接口的地方太多了，如果直接在各自頁面中調(diào)用，也會顯得代碼十分的庸雜，所以不同的功能模塊接口調(diào)用，為了避免混淆在一起，建議將api 請求接口 抽離出去，這樣一來，頁面的 js 部分就只著重于對發(fā)起請求前和請求響應(yīng)后的數(shù)據(jù)邏輯處理。這樣的處理，更加的符合 sass 化。

如上圖結(jié)構(gòu)，我在 api 文件夾下，我建了一個 index.js 文件，代表著 index 這個模塊是負(fù)責(zé)我整個首頁模塊的接口托管。其他新的模塊在下面繼續(xù)創(chuàng)建文件進(jìn)行托管。

import { request } from "../utils/Encapsulation_api";  //導(dǎo)入我們封裝的請求方法。

//首頁請求接口
export const indexreq = (params) => {     //接收頁面調(diào)用傳遞過來的參數(shù)
  return request({   //調(diào)用請求方法
    url: "/api/history/today",   //傳入請求地址
    method: "GET",               //傳入請求方法
    data: params                 //這里的參數(shù)來自于頁面調(diào)用時，傳過來的參數(shù)  
  })
}

3. 在頁面中，調(diào)用上述模塊中相應(yīng)的 api 接口，將參數(shù)依次傳遞過去，同時由于我們的請求方法是采用了 Promise 的方式封裝的，所以在頁面邏輯調(diào)用時，還可以 使用 async 和 await 的方式，將異步代碼做同步化處理。

  async getdatas() {
    let parameter = {            //頁面中，收集處理好，要傳遞的參數(shù)
      app_id: "rgihdrm0kslojqvm",
      type: 1,
      app_secret: "WnhrK251TWlUUThqaVFWbG5OeGQwdz09"
    }
    let data = await indexreq(parameter);
    //data 身上就可以直接拿到，請求回來的數(shù)據(jù)。
    if (data.statusCode === 200) {
      wx.showToast({
        title: "首頁加載成功",
        icon: "success"
      })
    }
  },

概述：

當(dāng)看到這里的時候，想必小伙伴們也都體會到了，對請求接口做封裝處理后，確實更具有 “模塊化的編程思想了”，每個模塊的 功能任務(wù)，更加的專注化，這樣處理的好處是，發(fā)生異常錯誤時，能夠快速的定位解決，且代碼復(fù)用效率更高。

???♂? 博主座右銘：向陽而生，我還在路上！
——————————————————————————————
??博主想說：將持續(xù)性為社區(qū)輸出自己的資源，同時也見證自己的進(jìn)步！
——————————————————————————————
???♂? 如果都看到這了，博主希望留下你的足跡！【??收藏！??點贊！??評論！】
——————————————————————————————文章來源地址http://www.zghlxwxcb.cn/news/detail-759528.html

到了這里，關(guān)于微信小程序 基于Promise 對 wx.request 封裝處理的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！