[TOC](目錄) # 1，前言 *** 在開發微信小程式的過程中，避免不了和服務端請求資料，微信小程式給我們提供了`wx.request`這個API，呼叫方法如下 ```javascript 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`  ## 3.1，request的封裝 *** 在`requestFn.js`中，我們要做到的是建立一個`function`，在裡面統一處理`wx.request`需要的引數和返回值，還有請求過程中的`Loading`提示，`Toast`提示，然後通過`module.exports`將這個`function`暴露出去，完整程式碼如下。 ```javascript 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互動的自定義封裝](https://www.cnblogs.com/-pdd/p/14289071.html) ## 3.2，api的封裝 *** `request`已經封裝好了，下面就是將專案需要的請求介面，還有各個模組的資料請求方法定義一下，統一放在`api.js`中，方便維護（ps：如果你的模組非常多，可以按模組建立不同的api.js，按需引入）。  詳細程式碼如下 ```javascript 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`。 ```javascript import HTTP from "../../requestFn/Api"; ``` 2，在`Page`物件中定義方法 ```javascript // 獲取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** ==往期文章== + [微信小程式實現上傳多張本地圖片到伺服器和圖片預覽](https://www.cnblogs.com/-pdd/p/14120442.html) + [簡單的JS+CSS實現網頁自定義換膚](https://www.cnblogs.com/-pdd/p/13901765.html) + [微信小程式API互動的自定義封裝](https://www.cnblogs.com/-pdd/p/14289071.html) ==個人主頁== + [CSDN](https://blog.csdn.net/pdd11997110103?spm=1010.2135.3001.5421) + [GitHub](https://github.com/pdd11997110103) + [簡書](https://www.jianshu.com/u/b7a8536bff06) + [部落格園](https://www.cnblogs.com/-pdd/) + [掘金](https://juejin.cn/user/747323639