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.');

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怎么取消已发送的请求”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！