这篇文章主要介绍Axios怎么取消已发送的请求，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站制作、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的尼木网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
Axios 介绍
Axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
Axios 使用 cancel token 取消请求
Axios的 cancel token API 基于cancelable promises proposal，它还处于第一阶段。
可以使用 CancelToken.source 工厂方法创建 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 参数是可选的）
source.cancel('Operation canceled by the user.');2.还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token：
var CancelToken = axios.CancelToken;
var cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// executor 函数接收一个 cancel 函数作为参数
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具体的业务组件：
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() // 请求发送前调用
this.page = val
this.loadTable = true
getLatenessDetail(this.params, (val - 1) * 10, this)
.then(
res => {
this.loadTable = false
this.tableData = res.data
}
)
}
}以上是“Axios怎么取消已发送的请求”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
