詳解Axios 如何取消已發(fā)送的請求
前言
最近在項目中遇到一個問題,在連續(xù)發(fā)送同一請求時,如果第二次請求比第一次請求快,那么實際顯示的是第一次請求的數(shù)據(jù),這就會造成數(shù)據(jù)和我選擇的內容不一致的問題。解決的方案:在后續(xù)發(fā)送請求時,判斷之前的請求是否完成(同一個接口),如果未完成則立即取消。然后在發(fā)送新的請求。
Axios 介紹
Axios是一個基于 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。
Axios 使用 cancel token 取消請求
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 {
// 處理錯誤
}
});
// 取消請求(message 參數(shù)是可選的)
source.cancel('Operation canceled by the user.');
2.還可以通過傳遞一個 executor 函數(shù)到 CancelToken 的構造函數(shù)來創(chuàng)建 cancel token:
var CancelToken = axios.CancelToken;
var cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// executor 函數(shù)接收一個 cancel 函數(shù)作為參數(shù)
cancel = c;
})
});
// 取消請求
cancel();
我自己在項目中用的是第二種方案:
提取所有的 api 進行封裝:
import request from '../utils/request' // 配置過的Axios 對象
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) { // 設置 cancel token
that.source = c;
})
})
}
export xxx
具體的業(yè)務組件:
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('終止請求'); //取消請求
}
},
getTableData(val) {
this.cancelQuest() // 請求發(fā)送前調用
this.page = val
this.loadTable = true
getLatenessDetail(this.params, (val - 1) * 10, this)
.then(
res => {
this.loadTable = false
this.tableData = res.data
}
)
}
}
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
Vue中的ref作用詳解(實現(xiàn)DOM的聯(lián)動操作)
這篇文章主要介紹了Vue中的ref作用詳解(實現(xiàn)DOM的聯(lián)動操作),需要的朋友可以參考下2017-08-08
vue監(jiān)聽頁面滾動到某個高度觸發(fā)事件流程
這篇文章主要介紹了vue監(jiān)聽頁面滾動到某個高度觸發(fā)事件流程,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04

