微信小程式request請求的封裝

鵬多多發表於2021-01-18
微信小程式封裝

目錄

1，前言

在開發微信小程式的過程中，避免不了和服務端請求資料，微信小程式給我們提供了wx.request這個API，呼叫方法如下

wx.request({
  url: 'www.baidu.com', //僅為示例，並非真實的介面地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 預設值
  },
  success (res) {
    console.log(res.data)
  }
});

作為一個合格的前端開發，為了程式碼質量和優雅度（其實是因為懶），避免不了封裝一些重複程式碼和功能，來使開發過程更加酣暢淋漓。

2，實現思路

專案中，wx.request的很多引數都是固定的，只需要改變data的值，而一般我們的邏輯處理都是在wx.request的回撥success，fail和complete中操作的，並且有部分邏輯也是相同的，（比如判斷介面返回資料是否成功，根據成功或失敗顯示不同的提示框等等），所以博主在這邊用了Promise來做了一個鏈式呼叫封裝，少去了大部分重複語句。

3，實現過程

首先我們需要建立一個公共的requestFn.js檔案，在這個檔案中寫我們的wx.request的封裝，然後還需要建立一個公共的Api.js檔案，這個裡面存放我們的介面地址和自定義的function，最後，在微信小程式根目錄下的app.js中找到globalData，在裡面寫上專案常用的請求域名，具體的如下圖。

目錄結構

目錄結構

app.js

BaseURL

3.1，request的封裝

在requestFn.js中，我們要做到的是建立一個function，在裡面統一處理wx.request需要的引數和返回值，還有請求過程中的Loading提示，Toast提示，然後通過module.exports將這個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("網路開小差了");
        reject(res);
      }
    })
  })
};

module.exports = {
  Request
};

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

3.2，api的封裝

request已經封裝好了，下面就是將專案需要的請求介面，還有各個模組的資料請求方法定義一下，統一放在api.js中，方便維護（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 - 裝置端型別DICT_APP_CLIENT_TYPE_CODE_ANDROID（安卓DICT_APP_CLIENT_TYPE_CODE_IOS（蘋果）
  */
  banner(userId, appClientTypeCode){
    return requestFn.Request({
      url:API.banner,
      data:{
        userId:userId,
        appClientTypeCode:appClientTypeCode,
      }
    })
  },
}

module.exports =  HTTP;

4，實際使用

在這幾個步驟之後，我們的一個request的封裝就完成了，接下來就是實際應用了，呼叫方法如下。

1，在我們的頁面對應的js檔案頭部先要引入我們對應的api.js。

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

2，在Page物件中定義方法

// 獲取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
        });
    });
 }

以上就是全部內容，如有寫的不對的，歡迎指出。

如果看了覺得有幫助的，我是@鵬多多，歡迎 點贊 關注 評論；
END

往期文章

個人主頁

相關文章