src/utils/request.js

import axios from 'axios'// 办法一:申请形式、申请 URL、申请参数都一样时,视为同一申请// function generateReqKey(config) {//   const { method, url, params, data } = config;//   return [method, url, JSON.stringify(params), JSON.stringify(data)].join("&");// }// 办法二:申请形式、申请 URL视为同一申请,（不判断参数是否统一，列表页在网络不稳固时，存在先发动的page:2数据比后发动的page:3数据后返回，导致显示页码3，展现的是页码2的数据）//用于依据以后申请的信息，生成申请 Keyfunction generateReqKey(config) {  const { method, url } = config;  return [method, url].join("&");}//用于把以后申请信息增加到pendingRequest对象中const pendingRequest = new Map();function addPendingRequest(config) {  const requestKey = generateReqKey(config);  config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => {    if (!pendingRequest.has(requestKey)) {      pendingRequest.set(requestKey, cancel);    }  });}//查看是否存在反复申请，若存在则勾销已发的申请function removePendingRequest(config) {  const requestKey = generateReqKey(config);  if (pendingRequest.has(requestKey)) {    const cancelToken = pendingRequest.get(requestKey);    cancelToken(requestKey);    pendingRequest.delete(requestKey);  }}// 创立axios实例const service = axios.create({  baseURL: '接口地址',  timeout: 30000})// request拦截器service.interceptors.request.use(  config => {    removePendingRequest(config); // 查看是否存在反复申请，若存在则勾销已发的申请    addPendingRequest(config); // 把以后申请信息增加到pendingRequest对象中    return config;  },  error => {    Promise.reject(error)  })// response 拦截器service.interceptors.response.use(  response => {    removePendingRequest(response.config); // 从pendingRequest对象中移除申请    return response.data  },  error => {    removePendingRequest(error.config || {}); // 从pendingRequest对象中移除申请    if (axios.isCancel(error)) {      console.log("已勾销的反复申请：" + error.message);    } else {      // 增加异样解决    }    return Promise.reject(error)  })export default service

src/api/index.js

import request from '@/utils/request'// 验证码export function getCode(data) {    return request({        url: '/support/country',        method: 'get',        params: data    })}

页面调用

<template>  <div id="app">    <button @click="send()">申请</button>  </div></template><script>import { getCode } from "@/api/index.js";export default {  name: "App",  methods: {//反复点击,将会勾销上一次pending状态的同一申请    send() {      getCode().then((res) => {        console.log("res", res);      });    }     },};</script><style></style>