封装axios并实现发送请求前如果有正在执行的请求就取消请求

1.新建封装文件，cancelAxios.js

import axios from "axios";
const newAxios = axios.create({
  baseURL: window.$serveHttp.BaseUrl,//自己的地址
});
const CancelToken = axios.CancelToken;
let cancel; //用于保存请求的函数
// 请求拦截器
newAxios.interceptors.request.use(
  (config) => {
    //在准备发请求前,取消未完成的请求,使得重复点击时,取消上次发送的请求
    if (typeof cancel === "function") {
      cancel();
    }
    //给config添加一个cancelToken的配置
    config.cancelToken = new CancelToken(function executor(c) {
      //c 是用于取消当前请求的函数
      // 保存取消函数,用于之后可能需要取消当前的请求
      cancel = c;
    });
    return config;
  },
  (error) => {
    console.log(error, "取消");
    return Promise.reject();
  }
);
// 响应拦截器
newAxios.interceptors.response.use(
  (response) => {
    cancel = null;
    return response;//成功回调
  },
  (error) => {
    console.log(error, "取消请求");
    return error;//取消回调
  }
);

// 导出自定义函数，参数对象结构赋值
export default ({ url, method = "GET", params, data, headers }) => {
  return newAxios({
    url,
    method: method,
    params: params,
    data: data,
    headers: headers,
  });
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

2.使用封装文件

import request from "../utils/cancelAxios";
// 接口
export const getGeoCodingAPI = (data) => {
  return request({
    url: "/******/*****",
    method: "post",
    headers: {
      "Content-Type": "application/json",
    },
    data:data,
  });
};

1
2
3
4
5
6
7
8
9
10
11
12
13