如何避免多次调用同一接口

在 Vue 2 中，想要在离开路由前终止未完成的接口请求，核心是结合 vue-router 的导航守卫 beforeRouteLeave ，搭配 AbortController 或 axios CancelToken 来中断请求。以下是两种可直接复用的方案：

方案1：基于 AbortController （推荐，axios 0.22.0+ 支持）

适用于大多数现代项目，在组件内维护请求控制器实例，路由离开时主动中断。

javascript

<template>

<div>数据加载中...</div>

</template>

<script>

export default {

data() {

return {

abortController: null, // 存储请求控制器

listData: \[\]

};

},

methods: {

async fetchList() {

// 若已有未完成请求，先中断

if (this.abortController) {

this.abortController.abort();

}

// 创建新的控制器

this.abortController = new AbortController();

try {

const res = await this.$axios.get('/api/getList', {

signal: this.abortController.signal // 关联中断信号

});

this.listData = res.data;

} catch (err) {

// 过滤主动中断的错误，避免控制台报错

if (err.name !== 'AbortError') {

console.error('请求失败', err);

}

}

}

},

// 路由离开前的守卫

beforeRouteLeave(to, from, next) {

// 中断未完成的请求

if (this.abortController) {

this.abortController.abort();

this.abortController = null; // 重置

}

next(); // 必须调用，否则无法跳转路由

},

mounted() {

this.fetchList(); // 组件挂载时发起请求

}

};

</script>

方案2：全局请求管理 + 路由守卫（适合多组件场景）

如果项目中有多个组件需要处理，可在 axios 拦截器中维护请求队列，并在路由全局守卫中统一中断当前页面的请求。

1. 封装 axios 请求，记录请求标识

javascript

// utils/request.js

import axios from 'axios';

const service = axios.create({ baseURL: '/api' });

// 存储当前页面的请求控制器：{ controller, url }

let pendingRequests = \[\];

// 添加请求到队列

const addPending = (config, controller) => {

pendingRequests.push({ controller, url: config.url });

};

// 中断当前页面所有未完成请求

export const cancelAllPending = () => {

pendingRequests.forEach(item => item.controller.abort());

pendingRequests = \[\]; // 清空队列

};

// 请求拦截器

service.interceptors.request.use(config => {

const controller = new AbortController();

config.signal = controller.signal;

addPending(config, controller);

return config;

});

// 响应拦截器

service.interceptors.response.use(

res => {

// 请求完成后移除队列

pendingRequests = pendingRequests.filter(item => item.url !== res.config.url);

return res;

},

err => {

if (err.name !== 'AbortError') {

pendingRequests = pendingRequests.filter(item => item.url !== err.config?.url);

}

return Promise.reject(err);

}

);

export default service;

2. 在路由全局守卫中调用中断方法

javascript

// router/index.js

import Vue from 'vue';

import Router from 'vue-router';

import { cancelAllPending } from '@/utils/request';

import Home from '@/views/Home';

Vue.use(Router);

const router = new Router({

routes: { path: '/', name: 'Home', component: Home }

});

// 全局路由离开守卫

router.beforeEach((to, from, next) => {

// 离开当前路由前，中断所有未完成请求

cancelAllPending();

next();

});

export default router;

关键注意事项：

以下是 axios 低版本（＜0.22.0） 基于 CancelToken 在组件内实现路由离开前中断未完成请求的完整代码，适配 Vue 2 组件内守卫：

组件内单独处理方案

javascript

<template>

<div>数据加载中...</div>

</template>

<script>

import axios from 'axios';

// 引入 CancelToken 和 isCancel 方法

const { CancelToken, isCancel } = axios;

export default {

data() {

return {

cancelRequest: null, // 存储取消请求的方法

listData: \[\]

};

},

methods: {

async fetchList() {

// 若存在未完成请求，先取消

if (this.cancelRequest) {

this.cancelRequest('路由跳转，中断请求');

this.cancelRequest = null; // 重置取消方法

}

try {

const res = await axios.get('/api/getList', {

// 创建 CancelToken 实例

cancelToken: new CancelToken(c => {

// c 就是取消请求的方法，赋值给变量

this.cancelRequest = c;

})

});

this.listData = res.data;

} catch (err) {

// 过滤主动取消的请求错误，避免控制台报错

if (!isCancel(err)) {

console.error('请求失败：', err);

}

}

}

},

// 组件内路由离开守卫

beforeRouteLeave(to, from, next) {

// 离开路由时，取消未完成的请求

if (this.cancelRequest) {

this.cancelRequest('路由跳转，中断请求');

this.cancelRequest = null;

}

next(); // 必须调用，否则无法跳转

},

mounted() {

this.fetchList(); // 组件挂载时发起请求

}

};

</script>

全局统一处理方案（适配多组件）

1. 封装 axios 并维护取消请求队列

javascript

// utils/request.js

import axios from 'axios';

const { CancelToken, isCancel } = axios;

const service = axios.create({ baseURL: '/api' });

// 存储当前页面的取消请求方法集合

let cancelRequestArr = \[\];

// 添加取消方法到队列

const addCancelRequest = (cancel) => {

cancelRequestArr.push(cancel);

};

// 取消所有未完成请求

export const cancelAllRequest = () => {

cancelRequestArr.forEach(cancel => {

cancel('路由跳转，全局中断请求');

});

cancelRequestArr = \[\]; // 清空队列

};

// 请求拦截器

service.interceptors.request.use(config => {

config.cancelToken = new CancelToken(c => {

addCancelRequest(c);

});

return config;

});

// 响应拦截器

service.interceptors.response.use(

res => res,

err => {

// 过滤主动取消的错误

if (!isCancel(err)) {

return Promise.reject(err);

}

}

);

export default service;

2. 在路由全局守卫中调用取消方法

javascript

// router/index.js

import Vue from 'vue';

import Router from 'vue-router';

import { cancelAllRequest } from '@/utils/request';

import Home from '@/views/Home';

Vue.use(Router);

const router = new Router({

routes: { path: '/', name: 'Home', component: Home }

});

// 全局路由守卫：跳转前取消所有请求

router.beforeEach((to, from, next) => {

cancelAllRequest();

next();

});

export default router;

关键注意事项

1. CancelToken 是 axios 旧版 API，已被标记为废弃，新项目优先使用 AbortController 。

2. 取消请求的错误信息可自定义，通过 isCancel() 方法精准判断是否为主动取消的请求。