詳解Axios 如何取消已發(fā)送的請(qǐng)求
前言
最近在項(xiàng)目中遇到一個(gè)問題,在連續(xù)發(fā)送同一請(qǐng)求時(shí),如果第二次請(qǐng)求比第一次請(qǐng)求快,那么實(shí)際顯示的是第一次請(qǐng)求的數(shù)據(jù),這就會(huì)造成數(shù)據(jù)和我選擇的內(nèi)容不一致的問題。解決的方案:在后續(xù)發(fā)送請(qǐng)求時(shí),判斷之前的請(qǐng)求是否完成(同一個(gè)接口),如果未完成則立即取消。然后在發(fā)送新的請(qǐng)求。
Axios 介紹
Axios是一個(gè)基于 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。
Axios 使用 cancel token 取消請(qǐng)求
Axios的 cancel token API 基于cancelable promises proposal,它還處于第一階段。
可以使用 CancelToken.source 工廠方法創(chuàng)建 cancel token,像這樣:
var CancelToken = axios.CancelToken; var source = CancelToken.source(); axios.get('/user/12345', { cancelToken: source.token }).catch(function(thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // 處理錯(cuò)誤 } }); // 取消請(qǐng)求(message 參數(shù)是可選的) source.cancel('Operation canceled by the user.');
2.還可以通過傳遞一個(gè) executor 函數(shù)到 CancelToken 的構(gòu)造函數(shù)來創(chuàng)建 cancel token:
var CancelToken = axios.CancelToken; var cancel; axios.get('/user/12345', { cancelToken: new CancelToken(function executor(c) { // executor 函數(shù)接收一個(gè) cancel 函數(shù)作為參數(shù) cancel = c; }) }); // 取消請(qǐng)求 cancel();
我自己在項(xiàng)目中用的是第二種方案:
提取所有的 api 進(jìn)行封裝:
import request from '../utils/request' // 配置過的Axios 對(duì)象 import axios from 'axios' export function getLatenessDetailSize(params, that) { return request({ url: '/api/v1/behaviour/latenessDetailSize', method: 'post', params: params, cancelToken: new axios.CancelToken(function executor(c) { // 設(shè)置 cancel token that.source = c; }) }) } export xxx
具體的業(yè)務(wù)組件:
import { getLatenessDetail } from "../api"; export default { data() { return { tableData: [], total: 0, page: 1, loadTable: false, params: { }, source: null } }, methods: { cancelQuest() { if (typeof this.source === 'function') { this.source('終止請(qǐng)求'); //取消請(qǐng)求 } }, getTableData(val) { this.cancelQuest() // 請(qǐng)求發(fā)送前調(diào)用 this.page = val this.loadTable = true getLatenessDetail(this.params, (val - 1) * 10, this) .then( res => { this.loadTable = false this.tableData = res.data } ) } }
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解決Vue+Electron下Vuex的Dispatch沒有效果問題
這篇文章主要介紹了Vue+Electron下Vuex的Dispatch沒有效果的解決方案 ,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05VUE中的export default和export使用方法解析
export default和export都能導(dǎo)出一個(gè)模塊里面的常量,函數(shù),文件,模塊等,在其它文件或模塊中通過import來導(dǎo)入常量,函數(shù),文件或模塊。但是,在一個(gè)文件或模塊中export,import可以有多個(gè),export default卻只能有一個(gè)。2022-12-12vue3使用element-plus搭建后臺(tái)管理系統(tǒng)之菜單管理功能
這篇文章主要介紹了vue3使用element-plus搭建后臺(tái)管理系統(tǒng)之菜單管理,使用element-plus el-tree組件快速開發(fā)樹形菜單結(jié)構(gòu),el-tree組件中filter-node-method事件便可以實(shí)現(xiàn)樹形菜單篩選過濾功能,需要的朋友可以參考下2022-04-04vue-router路由懶加載及實(shí)現(xiàn)的3種方式
這篇文章主要給大家介紹了關(guān)于vue-router路由懶加載及實(shí)現(xiàn)的3種方式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02Vue表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例
這篇文章主要介紹了Vue表單提交點(diǎn)擊事件只允許點(diǎn)擊一次的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10Vue2.0子同級(jí)組件之間數(shù)據(jù)交互方法
下面小編就為大家分享一篇Vue2.0子同級(jí)組件之間數(shù)據(jù)交互方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02element日期組件實(shí)現(xiàn)只能選擇小時(shí)或分鐘
本文主要介紹了element日期組件實(shí)現(xiàn)只能選擇小時(shí)或分鐘,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01vue-cli安裝全過程(附帶cnpm安裝不成功及vue不是內(nèi)部命令)
這篇文章主要介紹了vue-cli安裝全過程(附帶cnpm安裝不成功及vue不是內(nèi)部命令),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11