前言
創(chuàng)新互聯(lián)長(zhǎng)期為近1000家客戶(hù)提供的網(wǎng)站建設(shè)服務(wù),團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年,關(guān)注不同地域、不同群體,并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù);打造開(kāi)放共贏平臺(tái),與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為乾安企業(yè)提供專(zhuān)業(yè)的做網(wǎng)站、網(wǎng)站建設(shè),乾安網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。
在開(kāi)發(fā)中,經(jīng)常會(huì)遇到接口重復(fù)請(qǐng)求導(dǎo)致的各種問(wèn)題。
對(duì)于重復(fù)的get請(qǐng)求,會(huì)導(dǎo)致頁(yè)面更新多次,發(fā)生頁(yè)面抖動(dòng)的現(xiàn)象,影響用戶(hù)體驗(yàn)。
對(duì)于重復(fù)的post請(qǐng)求,會(huì)導(dǎo)致在服務(wù)端生成兩次記錄(例如生成兩條訂單記錄)。
如果當(dāng)前頁(yè)面請(qǐng)求還未響應(yīng)完成,就切換到了下一個(gè)路由,那么這些請(qǐng)求直到響應(yīng)返回才會(huì)中止。
無(wú)論從用戶(hù)體驗(yàn)或者從業(yè)務(wù)嚴(yán)謹(jǐn)方面來(lái)說(shuō),取消無(wú)用的請(qǐng)求確實(shí)是需要避免的。
當(dāng)然我們可以通過(guò)頁(yè)面loading來(lái)避免用戶(hù)進(jìn)行下一次的操作,但本文只討論單純的如何取消這些無(wú)用的請(qǐng)求。
axios 的 cancelToken
axios是一個(gè)主流的http請(qǐng)求庫(kù),它提供了兩種取消請(qǐng)求的方式。
通過(guò)axios.CancelToken.source生成取消令牌token和取消方法cancel
const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('/user/12345', { cancelToken: source.token }).catch(function(thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // handle error } }); axios.post('/user/12345', { name: 'new name' }, { cancelToken: source.token }) // cancel the request (the message parameter is optional) source.cancel('Operation canceled by the user.');
通過(guò)axios.CancelToken構(gòu)造函數(shù)生成取消函數(shù)
const CancelToken = axios.CancelToken; let cancel; axios.get('/user/12345', { cancelToken: new CancelToken(function executor(c) { // An executor function receives a cancel function as a parameter cancel = c; }) }); // cancel the request cancel();
需要注意的是在catch中捕獲異常時(shí),應(yīng)該使用axios.isCancel()判斷當(dāng)前請(qǐng)求是否是主動(dòng)取消的,以此來(lái)區(qū)分普通的異常邏輯。
封裝取消請(qǐng)求邏輯
上面有兩種取消請(qǐng)求,用哪種都是可以的,這里使用第二種。
取消請(qǐng)求主要有兩個(gè)場(chǎng)景:
我們封裝幾個(gè)方法:
// 聲明一個(gè) Map 用于存儲(chǔ)每個(gè)請(qǐng)求的標(biāo)識(shí) 和 取消函數(shù) const pending = new Map() /** * 添加請(qǐng)求 * @param {Object} config */ const addPending = (config) => { const url = [ config.method, config.url, qs.stringify(config.params), qs.stringify(config.data) ].join('&') config.cancelToken = config.cancelToken || new axios.CancelToken(cancel => { if (!pending.has(url)) { // 如果 pending 中不存在當(dāng)前請(qǐng)求,則添加進(jìn)去 pending.set(url, cancel) } }) } /** * 移除請(qǐng)求 * @param {Object} config */ const removePending = (config) => { const url = [ config.method, config.url, qs.stringify(config.params), qs.stringify(config.data) ].join('&') if (pending.has(url)) { // 如果在 pending 中存在當(dāng)前請(qǐng)求標(biāo)識(shí),需要取消當(dāng)前請(qǐng)求,并且移除 const cancel = pending.get(url) cancel(url) pending.delete(url) } } /** * 清空 pending 中的請(qǐng)求(在路由跳轉(zhuǎn)時(shí)調(diào)用) */ export const clearPending = () => { for (const [url, cancel] of pending) { cancel(url) } pending.clear() }
Map是ES6中一種新型的數(shù)據(jù)結(jié)構(gòu),本身提供了諸多方法,方便操作,適合當(dāng)前場(chǎng)景。如果不熟悉的可以查看ECMAScript 6 入門(mén)。
在給config.cancelToken賦值的時(shí)候,需要判斷當(dāng)前請(qǐng)求是否已經(jīng)在業(yè)務(wù)代碼中使用了cancelToken
qs是一個(gè)專(zhuān)門(mén)用來(lái)轉(zhuǎn)換對(duì)象和字符串參數(shù)的庫(kù),最初是由 TJ 創(chuàng)建并維護(hù)的,也是axios推薦使用的參數(shù)序列化庫(kù)。這里我們的目的只是單純的將參數(shù)對(duì)象轉(zhuǎn)換為字符串方便拼接。
Map結(jié)構(gòu)默認(rèn)部署了Symbol.iterator屬性,可以使用for...of循環(huán)直接獲取鍵名和鍵值,當(dāng)然你也可以使用for...in循環(huán)。
在 axios 攔截器中使用
主要的方法已經(jīng)寫(xiě)好了,只需要添加到axios攔截器中就可以了。
axios.interceptors.request.use(config => { removePending(options) // 在請(qǐng)求開(kāi)始前,對(duì)之前的請(qǐng)求做檢查取消操作 addPending(options) // 將當(dāng)前請(qǐng)求添加到 pending 中 // other code before request return config }, error => { return Promise.reject(error) }) axios.interceptors.response.use(response => { removePending(response) // 在請(qǐng)求結(jié)束后,移除本次請(qǐng)求 return response }, error => { if (axios.isCancel(error)) { console.log('repeated request: ' + error.message) } else { // handle error code } return Promise.reject(error) })
將clearPending()方法添加到vue路由鉤子函數(shù)中
router.beforeEach((to, from, next) => { clearPending() // ... next() })
測(cè)試效果
最后我們可以在瀏覽器中測(cè)試下,可以將chrome中控制面板的Network的網(wǎng)絡(luò)狀態(tài)切換為Slow 3G來(lái)模擬網(wǎng)速慢的情況。
我們把查詢(xún)按鈕的loading或者disabled屬性干掉來(lái)方便測(cè)試
在上面控制面板中可以看到,紅色的status為canceled的就是被取消的請(qǐng)求。
上面代碼在e-admin-vue(一個(gè)使用 vue + element-ui + vue-cli3 構(gòu)建的 rbac 權(quán)限模型)或者e-admin-react(一個(gè)使用 react + antd + create-react-app 構(gòu)建的 rbac 權(quán)限模型)中都有體現(xiàn),歡迎 star。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,謝謝大家對(duì)創(chuàng)新互聯(lián)的支持。
本文標(biāo)題:axios如何取消重復(fù)無(wú)用的請(qǐng)求詳解
URL分享:http://m.rwnh.cn/article42/pcdohc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供面包屑導(dǎo)航、網(wǎng)站維護(hù)、Google、虛擬主機(jī)、自適應(yīng)網(wǎng)站、響應(yīng)式網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)