引導讀者從最基礎的小程式網路請求封裝到網路請求封裝的最優解
在使用原生小程式網路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: 'https://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 = '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裡的單個請求方法
以下為圖示:
解釋:
- request.js負責將公共api與getPage.js裡傳入的api進行拼接,整合後向後臺傳送資料
- getPage.js向上負責向request.js傳送請求,向下作為傳送請求函式等待被呼叫,函式內部儲存非公共api
- page作為頁面,僅呼叫getPage.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以及其他,最終傳送向網路請求.如果願意,還可以單個頁面再細分,所作的一切都是為了服務於開發.
以上就是將小程式的原生網路請求一步步封裝達到最優解.
