您好,登錄后才能下訂單哦!
小編給大家分享一下微信小程序中網(wǎng)絡(luò)請求緩存的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
需求
提交小程序?qū)徍藭r(shí),有一個(gè)體驗(yàn)測評,產(chǎn)品讓我們根據(jù)小程序的體驗(yàn)測評報(bào)告去優(yōu)化小程序。
其中有一項(xiàng)是網(wǎng)絡(luò)請求的優(yōu)化,給我們出了很大的難題。
文檔中是這樣解釋的:3分鐘以內(nèi)同一個(gè)url請求不出現(xiàn)兩次回包大于128KB且一模一樣的內(nèi)容
看到這個(gè)問題的時(shí)候,首先想到的是在響應(yīng)頭上加上cache-control,經(jīng)過測試發(fā)現(xiàn)小程序并不支持網(wǎng)路請求緩存。搜索發(fā)現(xiàn)官方明確答復(fù),小程序不支持網(wǎng)絡(luò)請求緩存:wx.request不支持http緩存
既然官方不支持網(wǎng)絡(luò)請求緩存,那只能自己想辦法解決這個(gè)問題了。
先來看一下需求:3分鐘內(nèi),同一請求只能請求一次。
分析
分析:
只需做GET請求的網(wǎng)絡(luò)緩存。
緩存時(shí)間如何控制。
做了緩存之后,如何知道3分鐘,這個(gè)請求在服務(wù)端數(shù)據(jù)有沒更新。
提交GET請求前,先檢查本地有沒有緩存
前兩點(diǎn)比較好實(shí)現(xiàn),雖然小程序不支持網(wǎng)絡(luò)請求緩存,但我們還是可以利用cache-control來實(shí)現(xiàn)這個(gè)功能。
首先網(wǎng)絡(luò)請求需不需要情緩存統(tǒng)一交給服務(wù)端去做,服務(wù)端在處理GET請求時(shí),統(tǒng)一加上響應(yīng)頭cache-control,如果需要緩存就用max-age=180,如果不需要做網(wǎng)絡(luò)請求就用no-cache。前端根據(jù)響應(yīng)頭信息自己做前端緩存。
其中的難點(diǎn)是前端如何知道服務(wù)端數(shù)據(jù)有沒更新,如果服務(wù)端數(shù)據(jù)更新了,前端還是使用緩存這是有問題的。
經(jīng)過一番思考后發(fā)現(xiàn),前端提交數(shù)據(jù)后,相應(yīng)的GET請求數(shù)據(jù)會更新,也就是說前端只要有數(shù)據(jù)提交,就應(yīng)該把緩存清空。
這有一個(gè)難點(diǎn),當(dāng)前端提交數(shù)據(jù)時(shí),前端是不知道哪些GET請求會因此更新數(shù)據(jù),所以這個(gè)問題我們沒有解決,我的方法比較粗暴:只要前端提交了數(shù)據(jù),就將所有緩存清空。這是一個(gè)治標(biāo)不治本的問題。
實(shí)現(xiàn)
公司項(xiàng)目封裝了HTTP請求
攔截請求,如果是GET請求,檢查緩存,
如果緩存沒過期,將緩存返回出去,不再發(fā)請求
如果緩存過期,發(fā)請求
if (request.method.toLowerCase() === "get"){ // param 請求信息 const cache = this.handleCatchControl(request) if (!cache.isRequest) return this.listener.onApiResponse(request, 200, cache.data), sequence; //將緩存返回給對應(yīng)的請求 }
緩存網(wǎng)絡(luò)請求
// param 響應(yīng)頭,上下文,響應(yīng)數(shù)據(jù) this.setCatchControl(headers, context, response.data)
兩個(gè)工具函數(shù)
處理網(wǎng)絡(luò)緩存
設(shè)置網(wǎng)絡(luò)緩存
設(shè)置網(wǎng)絡(luò)請求
GET請求緩存數(shù)據(jù),其他請求清空數(shù)據(jù)
數(shù)據(jù)格式:
//如果同時(shí)發(fā)起多個(gè)`GET`請求,需要拼接之前緩存數(shù)據(jù) ApiAgent.cacheData = Object.assign(ApiAgent.cacheData,{ [context.request.url]: { //api data, //響應(yīng)數(shù)據(jù) expireTime: Number(cacheControl.split("=")[1] + '000'), //過期時(shí)間 cacheTime: new Date().getTime(), //緩存時(shí)間 } })
// param 響應(yīng)頭,上下文,響應(yīng)數(shù)據(jù) setCatchControl(responseHeader: any, context: any, data: any) { if (context.request.method.toLowerCase() === "get") { const headers = HandleHeaders.get(responseHeader) const cacheControl = headers["cache-control"] if (cacheControl && cacheControl !== "no-cache") { ApiAgent.cacheData = Object.assign(ApiAgent.cacheData,{ [context.request.url]: { data, expireTime: Number(cacheControl.split("=")[1] + '000'), cacheTime: new Date().getTime(), } }) } } else { ApiAgent.cacheData = {} } }
處理網(wǎng)絡(luò)緩存
判斷緩存是否存在
判斷緩存有沒過期,在設(shè)置緩存時(shí),比對當(dāng)前時(shí)間和緩存時(shí)間,是否小于失效時(shí)間
// param 請求信息 handleCatchControl(request): any { const cacheArr = ApiAgent.cacheData if (Object.keys(cacheArr).length === 0) return { isRequest: true } let cache = {} Object.keys(cacheArr).forEach(cacheArrKey => { if (cacheArrKey === request.url) { cache = cacheArr[cacheArrKey] } }) const newDate = new Date().getTime() if (newDate - cache.cacheTime < expireTime){ return { isRequest: false, data: cache.data } } return { isRequest: true} }
響應(yīng)頭全部變成小寫,在小程序中,無法確定響應(yīng)頭的大小寫會導(dǎo)致報(bào)錯(cuò),所以統(tǒng)一處理響應(yīng)頭
class HandleHeaders { static get(headers: { [key: string]: string }) { const headersData: any = {} Object.keys(headers).forEach(key => { headersData[key.toLowerCase()] = headers[key] }) return headersData } }
總結(jié)
有一點(diǎn)沒有說,就是這個(gè)緩存是保存在哪里的?
既沒有用localStorage,也沒有用globalapp,用的是類的靜態(tài)屬性。
這樣做有3個(gè)好處:
使用localStorage數(shù)據(jù)不好清除,后期可維護(hù)性也較差
緩存掛在globalapp和請求無直接聯(lián)系
無需在退出小程序時(shí)手動清理緩存
我在使用時(shí)遇到一個(gè)坑,是因?yàn)樽约簺]有理解:類能保存數(shù)據(jù)的,不能保存狀態(tài),但類的對象是既可以保存數(shù)據(jù),也可以保存狀態(tài)的。
最后,此方法還是有很大的優(yōu)化空間。
以上是“微信小程序中網(wǎng)絡(luò)請求緩存的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。