快捷導(dǎo)航

微信小程序請求前置的方法詳解

更新時間：2021年03月10日 12:29:47 作者：ok同學(xué)

這篇文章主要給大家介紹了關(guān)于微信小程序請求前置的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

問題

因為我們有的頁面是在onload中去請求數(shù)據(jù)回來再渲染視圖，如果我們可以將請求數(shù)據(jù)這一步提前到小程序頁面跳轉(zhuǎn)前做，就可以早一點把數(shù)據(jù)請求回來，優(yōu)化的效果取決于頁面跳轉(zhuǎn)所需的時間。

需求

需要一種請求前置方法充分利用跳轉(zhuǎn)的時間，預(yù)先請求接口數(shù)據(jù)，但是要盡量減少對舊項目的改造成本。因為現(xiàn)在我負責(zé)的小程序項目是用axios來請求接口數(shù)據(jù)，所以這里只舉例axios中post的改造的思路。我這里是通過改寫post方法，在請求的時候?qū)π枰A(yù)先請求的接口進行緩存，等第二次請求的時候返回第一次請求的promise，從而不用再發(fā)起新請求。

具體步驟

1、改造post方法

http文件

let instance = axios.create({ // 創(chuàng)建axios請求實例
 // 省略部分代碼
});

let { post } = instance; // 保存原本的post方法
let cache = {}; // 請求緩存

instance.post = function(...list) {

 let [url, data = {}] = list;

 if (cache[url]) { // 返回預(yù)請求的promise
 let pre = cache[url];
 delete cache[url];
 return pre;
 }

 if (data.pre) { //以pre作為是否是預(yù)請求
 delete data.pre;
 cache[url] = post(...list)
 return cache[url];
 }

 return post(...list); //普通的請求
}

2、使用

跳轉(zhuǎn)前的頁面，即上一個頁面

// 省略部分代碼 ...

// 這是在下個頁面要去請求接口的數(shù)據(jù)，提前在wx.navigateTo跳轉(zhuǎn)前請求，并存儲下來。
$http.post('/act/activities/lucky:search', { activityId: 12 , pre: true })

wx.nextTick(() => { //使用wx.nextTick是讓上面的請求先發(fā)出再跳轉(zhuǎn)
 wx.navigateTo({
 url: `${TYPE_TO_ROUTE_MAP[templateType]}?id=${activity.activityId}`
 });
})

// 省略部分代碼 ...

效果

未使用預(yù)加載

使用預(yù)加載

兩者紅色框的寬度差，表示的是提前了多少時間去請求接口數(shù)據(jù)，大概在100ms左右。因為下面的靜態(tài)資源地址來自于接口的數(shù)據(jù)，相當(dāng)于減少了堵塞后面資源加載100ms左右。

總結(jié)

這個原理就是利用小程序跳轉(zhuǎn)這部分時間提前請求數(shù)據(jù)，所以對于性能差的手機受益會大一些，雖然在開發(fā)者工具看起來能省個100ms左右，但是存在以下兩個限制
頁面加載完成需要預(yù)請求的接口數(shù)據(jù)里的數(shù)據(jù)
需要在上一個頁面發(fā)起預(yù)請求，并對跳轉(zhuǎn)做nextTick處理

導(dǎo)致這個優(yōu)化的收益對整個項目來說確實有些雞肋。

到此這篇關(guān)于微信小程序請求前置的文章就介紹到這了,更多相關(guān)小程序請求前置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: