axios取消请求 CancelToken（如何使用）

最新推荐文章于 2024-09-13 10:44:44 发布

小墨宝

最新推荐文章于 2024-09-13 10:44:44 发布

阅读量3k

点赞数

分类专栏： axios vue

本文链接：https://blog.csdn.net/qq_38935512/article/details/109327147

版权

vue 同时被 2 个专栏收录

130 篇文章 1 订阅

订阅专栏

axios

1 篇文章 0 订阅

订阅专栏

本文介绍如何使用CancelToken来实现请求的取消功能。通过封装axios请求并利用CancelToken，可以有效地控制请求的发起与中止，避免不必要的资源消耗。具体实现包括在多次请求时仅执行一次的有效方法。

摘要由CSDN通过智能技术生成

CancelToken——取消请求

1.使用方法，封装一个方法请求

我得项目结构
在这里插入图片描述

request: 封装得axios请求，拦截器响应头什么得都在这里面
ajax.js 写了几种请求方式

ajax.js 下面就单独拿了post请求来说

import request from "./request";
import axios from "axios";
import store from "../store";
export default {
ajaxPost: (par, url, cancel = {}) => {
		//如果存在 就中止
        if (cancel.cancel) cancel.cancel();
        //post请求
        return request({
            url: url,
            method: "post",
            // data: qs.stringify(par),
            data: par,
            headers: {
                Authorization: "Bearer " + store.state.token
            },
            //中止请求
            cancelToken: new axios.CancelToken(function executor(c) {
                cancel.cancel = c;
            })
        });
    },
  }

api: 接口

api.js

import ajax from "../ajax";
import self from "@eventBus/eventBus";
export default {
    // 修改浏览量
    postReadNum(param, callback, cancel = {}) {
        ajax.ajaxPost(param, "/home/postReadNum", cancel).then(res => {
            callback(res.result);
        });
    }
};

最后调用

data（）{
	return {
		cancel: {},	// 声明一个对象
	}
}

//方法
postNum() {
            this.api.home.postReadNum({}, res => {}, this.cancel);
        }
  //掉用
  created() {
        this.postNum();
        this.postNum();
        this.postNum();
    },

效果：只执行了一次
在这里插入图片描述