axios不发起请求_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.');

//欢迎加全栈开发交流君羊：864305860学习交流

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

}

)

}

}

//本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。

对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。

最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。