關於對小程式網路請求的封裝(詳盡版)
引導讀者從最基礎的小程式網路請求封裝到網路請求封裝的最優解
在使用原生小程式網路api時，有以下兩個缺點：
- 多個頁面往往代表發送多個網路請求，這樣對伺服器的壓力過大 -> 降壓
- 基於原因1，防止未來微信官方廢棄了wx.request這個api而換了另外一個api時造成的重複操作 ->降低依賴,防止重複
1. wx原生網路請求
微信原生請求看似很清晰，但成功與失敗的函數都是在 wx.request內部，假設讀者對jQuery有所了解，就會發覺跟jquery很像：
但這種方法已經瀕臨滅絕了，接下來使用基於promise對微信原生網路請求進行層層封裝
2. 簡單封裝
// ../../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相當了解,也可以使用進化版:
// ../../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
})
})
}
頁面內使用:
//頁面內導入
import reqeust from '../../request/one.js'
// 頁面的onload函數內使用
onLoad: function () {
reqeust({
url: '//xxxxxxxxxxxxxxxxxxxxxxxxxxx',
})
.then(res => {
console.log(res)
})
.catch(err => console.log(err))
}
結果也是一樣的
3. 進化版封裝
回顧下es6的導入導出知識:
// 常量的導出
//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 發起請求
//抽取公共url到單獨文件
//publicData.js
const baseURL = '//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里的單個請求方法
以下為圖示:
解釋:
- request.js負責將公共api與getPage.js里傳入的api進行拼接,整合後向後台發送數據
- getPage.js向上負責向request.js發送請求,向下作為發送請求函數等待被調用,函數內部存儲非公共api
- page作為頁面,僅調用getPage.js內部的函數即可
整演示例
//publicData.js 作為api的公共部分
const baseUrl= '//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以及其他,最終發送向網路請求.如果願意,還可以單個頁面再細分,所作的一切都是為了服務於開發.
以上就是將小程式的原生網路請求一步步封裝達到最優解.
