2，實(shí)現(xiàn)思路

項(xiàng)目中，wx.request的很多參數(shù)都是固定的，只需要改變data的值，而一般我們的邏輯處理都是在wx.request的回調(diào)success，fail和complete中操作的，并且有部分邏輯也是相同的，（比如判斷接口返回?cái)?shù)據(jù)是否成功，根據(jù)成功或失敗顯示不同的提示框等等），所以博主在這邊用了Promise來(lái)做了一個(gè)鏈?zhǔn)秸{(diào)用封裝，少去了大部分重復(fù)語(yǔ)句。

3，實(shí)現(xiàn)過(guò)程

首先我們需要?jiǎng)?chuàng)建一個(gè)公共的requestFn.js文件，在這個(gè)文件中寫(xiě)我們的wx.request的封裝，然后還需要?jiǎng)?chuàng)建一個(gè)公共的Api.js文件，這個(gè)里面存放我們的接口地址和自定義的function，最后，在微信小程序根目錄下的app.js中找到globalData，在里面寫(xiě)上項(xiàng)目常用的請(qǐng)求域名，具體的如下圖。

目錄結(jié)構(gòu)

目錄結(jié)構(gòu)

app.js

BaseURL

3.1，request的封裝

在requestFn.js中，我們要做到的是創(chuàng)建一個(gè)function，在里面統(tǒng)一處理wx.request需要的參數(shù)和返回值，還有請(qǐng)求過(guò)程中的Loading提示，Toast提示，然后通過(guò)module.exports將這個(gè)function暴露出去，完整代碼如下。

const app = getApp();
const baseURL = app.globalData.baseURL;
const FN = require('../publicFn/public');

const Request = (options) =>{
  return new Promise((resolve, reject) => {
    FN.Loading(1);
    wx.request({
      url: baseURL + options.url || '',
      data: options.data || {},
      method: options.method || 'POST',
      header:{'content-type': "application/x-www-form-urlencoded"},
      responseType:options.responseType || "",
      timeout:15000,
      success (res) {
        FN.LoadingOff();
        if(res.statusCode === 200){
          if(res.data.status === "y"){
            resolve(res.data);
          }else{
            FN.Toast(res.data.info);
          };
        }else{
          FN.Toast(res.errMsg);
        };
      },
      fail (res) {
        FN.Toast("網(wǎng)絡(luò)開(kāi)小差了");
        reject(res);
      }
    })
  })
};

module.exports = {
  Request
};

其中的FN，FN.Toast還有FN.Loading是博主自己二次封裝的一些微信小程序API，可以參考博主的另一篇文章：微信小程序API交互的自定義封裝

3.2，api的封裝

request已經(jīng)封裝好了，下面就是將項(xiàng)目需要的請(qǐng)求接口，還有各個(gè)模塊的數(shù)據(jù)請(qǐng)求方法定義一下，統(tǒng)一放在api.js中，方便維護(hù)（ps：如果你的模塊非常多，可以按模塊建立不同的api.js，按需引入）。

api.js

const requestFn = require('../requestFn/requestFn');

const API = {
  banner:"/web/getBanner.am",//輪播圖
};

const HTTP = {
  /**
  * banner
  * @param {String} userId - 用戶ID
  * @param {String} appClientTypeCode - 設(shè)備端類(lèi)型DICT_APP_CLIENT_TYPE_CODE_ANDROID（安卓DICT_APP_CLIENT_TYPE_CODE_IOS（蘋(píng)果）
  */
  banner(userId, appClientTypeCode){
    return requestFn.Request({
      url:API.banner,
      data:{
        userId:userId,
        appClientTypeCode:appClientTypeCode,
      }
    })
  },
}

module.exports =  HTTP;

4，實(shí)際使用

在這幾個(gè)步驟之后，我們的一個(gè)request的封裝就完成了，接下來(lái)就是實(shí)際應(yīng)用了，調(diào)用方法如下。

1，在我們的頁(yè)面對(duì)應(yīng)的js文件頭部先要引入我們對(duì)應(yīng)的api.js。

import  HTTP  from "../../requestFn/Api";

2，在Page對(duì)象中定義方法

// 獲取banner圖
getBanner () {
    let userId = null;
    if(app.globalData.userMsg !== null && app.globalData.userMsg.userId) userId = app.globalData.userMsg.userId;
    let system = app.globalData.systemInfo.system;
    let type = "DICT_APP_CLIENT_TYPE_CODE_IOS";
    if(system){
      if(!~system.indexOf("iOS")) type = "DICT_APP_CLIENT_TYPE_CODE_ANDROID";
    };
    HTTP.banner(userId, type)
    .then(res => {
        this.setData({
            bannerList:res.infoObject
        });
    });
 }

以上就是全部?jī)?nèi)容，如有寫(xiě)的不對(duì)的，歡迎指出。

如果看了覺(jué)得有幫助的，我是@上進(jìn)的鵬多多，歡迎 點(diǎn)贊 關(guān)注 評(píng)論；
END

往期文章

• 微信小程序?qū)崿F(xiàn)上傳多張本地圖片到服務(wù)器和圖片預(yù)覽
• 簡(jiǎn)單的JS+CSS實(shí)現(xiàn)網(wǎng)頁(yè)自定義換膚
• 微信小程序API交互的自定義封裝

個(gè)人主頁(yè)

• CSDN
• GitHub
• 簡(jiǎn)書(shū)
• 博客園
• 掘金