> 引導讀者從最基礎的小程式網路請求封裝到網路請求封裝的最優解 在使用原生小程式網路api時，有以下兩個缺點： 1. 多個頁面往往代表傳送多個網路請求，這樣對伺服器的壓力過大 -> 降壓 2. 基於原因1，防止未來微信官方廢棄了wx.request這個api而換了另外一個api時造成的重複操作 ->降低依賴,防止重複 ### 1. wx原生網路請求  > 微信原生請求看似很清晰，但成功與失敗的函式都是在 wx.request內部，假設讀者對jQuery有所瞭解，就會發覺跟jquery很像：  > *但這種方法已經瀕臨滅絕了，接下來使用基於promise對微信原生網路請求進行層層封裝* ----------------------- ### 2. 簡單封裝 ```js // ../../request/one.js export default function reqeust(params) { return new Promise((resolve, reject) => { wx.request({ url: params.url, method: params.method || 'get', data: params.data || {}, success: res => { resolve(res) }, fail: err => { reject(err) } }) }) } ``` > 如果對pomise相當瞭解,也可以使用進化版: ```js // ../../request/one.js export default function reqeust(params) { return new Promise((resolve, reject) => { wx.request({ url: params.url, method: params.method || 'get', data: params.data || {}, success: resolve, fail: reject }) }) } ``` 頁面內使用: ```js //頁面內匯入 import reqeust from '../../request/one.js' // 頁面的onload函式內使用 onLoad: function () { reqeust({ url: 'https://xxxxxxxxxxxxxxxxxxxxxxxxxxx', }) .then(res => { console.log(res) }) .catch(err => console.log(err)) } ``` *結果也是一樣的* ----------------------- ### 3. 進化版封裝 > 回顧下es6的匯入匯出知識: ```js // 常量的匯出 //public.js const demo = '使用export匯出的常量,不可以重新命名該常量,需要用大括號'; export { demo } //常量的匯入 //getdemo.js import { demo } from './public' console.log(demo ) // '使用export匯出的常量,不可以重新命名該常量,需要用大括號' //函式的匯出與匯入 //函式的匯出 //fn.js export function fn() { console.log("使用export匯出的fn,不可以重新命名該函式,需要用大括號") } //函式的匯入 //getFn.js import { fn } from './fn.js' fn(); // "使用export匯出的fn,不可以重新命名該函式,需要用大括號" //全部匯出與匯入 //匯出 //allData.js export default function allData() { console.log("使用export default 匯出的資料,可以重新命名該函式,不需要用大括號") } //getAllData.js //匯入 import reName_AllData from './allData.js' reName_AllData()//"使用export default 匯出的資料,可以重新命名該函式,不需要用大括號" ``` > 假設請求的url有一部分是相同的 * 將url分為兩部分:第一部分作為公共的請求地址publicURL,單獨抽離成一個檔案,另一部分作為單個頁面請求的網路地址PageUrl * 在requers.js裡將公共的請求地址publicURL新增進url裡 * 頁面匯入request.js 發起請求 ```js //抽取公共url到單獨檔案 //publicData.js const baseURL = 'https://jiazhuang/zheshi/yige/gonggongurl'; export { baseURL } //封裝的網路請求檔案,匯入上述檔案 //network1-0.js import { baseURL } from './public' export function request(params) { return new Promise((resolve, reject) => { wx.request({ url: baseURL + params.url, method: params.method || 'get', data: params.data || {}, success: resolve, fail: reject }); }) } //頁面使用時僅填入對應的網路地址即可 //頁面匯入封裝好的network1-0.js import { request } from '../../req/newwork1-5' //onLoad函式內使用 onLoad: function () { request({ url: 'public/v1/home/swiperdata' }).then(res => { console.log(res) }) .catch(err => console.log(err)) } ``` 以上就是第二層封裝. *但是這樣還是有不太方便的一面:* 單個頁面需要傳送的請求太多,程式碼的可讀性並不太好 那麼就有了終極版封裝: ### 4. 進化版封裝 這一步時,我們的目的就是為了分層: > 基於頁面分層,封裝單個頁面需要傳送的請求為一個檔案getPage.js由page.js負責向request.js傳送真正的網路請求,而頁面要做的就是呼叫page.js裡的單個請求方法 以下為圖示:  解釋: 1. request.js負責將公共api與getPage.js裡傳入的api進行拼接,整合後向後臺傳送資料 2. getPage.js向上負責向request.js傳送請求,向下作為傳送請求函式等待被呼叫,函式內部儲存非公共api 3. page作為頁面,僅呼叫getPage.js內部的函式即可 整演示例 ```js //publicData.js 作為api的公共部分 const baseUrl= 'https://jiazhuang-shiyige-api/api/'; export { baseUrl } //request.js 作為真正傳送網路請求的檔案 import { publicUrl } from './publicData' export default function reqeust(params) { return new Promise((resolve, reject) => { wx.request({ url: publicUrl + params.url, method: params.method || 'get', data: params.data || {}, success: resolve, fail: reject }) }) } // getIndexData.js : 向上負責呼叫request.js,向下負責該page頁面的傳送網路請求的所有函式,函式的內部儲存了非公共部分的請求地址 import reqeust from './request' export function getBannerData() { return reqeust({ url: 'wo/zhen-de/shi/api/banner', }) } //index頁面匯入所屬的getIndexData.js,在onload函式內呼叫所屬頁面的方法 import { getBannerData} from '../../request/getIndexData' onload(){ getBannerData().then(res => { console.log(res) //這裡就可以對資料進行操作了 }).catch(err => console.log(err)) } ``` 在這個例子裡,一步步解釋了流程,或許有些冗餘,但這些更符合了規範化,page頁面不關心傳送網路請求,只負責呼叫,getPageData.js只負責將對應的url傳送給request.js處理,而request.js負責拼接整合url以及其他,最終傳送向網路請求.如果願意,還可以單個頁面再細分,所作的一切都是為了服務於開發. 以上就是將小程式的原生網路請求一步步封裝達到最優解. ![](https://img2020.cnblogs.com/blog/1542059/202005/1542059-20200518130307077-20716366