vue中用axios发送get请求（vue中对axios已发送请求取消操作的封装）

我们在项目开发中会遇到这么一种情况，就是当网络比较慢或者后端接口查询慢的时候，用户点击发送了一个请求，但是等半天了没得响应，就会多次点击，导致多个接口处于pending状态，这样会加重服务器的负担，消耗浏览器的性能。那么遇到问题我们怎么解决呢？如果我们项目中用的是axios进行发送请求方式的话，在后续发送请求时，判断之前的请求处于pending状态的接口，如果有相同请求则取消掉以前请求。然后再发送新的请求。

查看axios api我们会看到axios.CancelToken方法可以进行取消请求，我们就对他进行封装使用

首先我们定义一个公共方法如下：

// 定义一个数组pending用于存储所有处于pending状态下的请求 let pending = [] // axios.CancelToken官网提供的api进行取消操作 const CancelToken = axios.CancelToken // 公用方法 let removePending = (config) => { for (let p in pending) { // 如果pending中的请求和新请求一致时 if (pending[p].oldUrl === config.url JSON.stringify(config.data) '&' config.method) { // 调用取消方法 pending[p].f() // 删除pending已有的请求 pending.splice(p, 1) } } }

那么我们有了公共方法如何使用呢，我们定义一个request.js文件，进行请求封封装拦截操作，完整代码如下

import Vue from 'vue' import axios from "axios"; const url = ‘xxxxxxxxxxx’//请换成开发环境请求地址 // 定义一个数组pending用于存储所有处于pending状态下的请求 let pending = [] // axios.CancelToken官网提供的api进行取消操作 const CancelToken = axios.CancelToken // 公用方法 let removePending = (config) => { for (let p in pending) { // 如果pending中的请求和新请求一致时 if (pending[p].oldUrl === config.url JSON.stringify(config.data) '&' config.method) { // 调用取消方法 pending[p].f() // 删除pending已有的请求 pending.splice(p, 1) } } } // 创建axios实例 const service = axios.create({ baseURL: url, // 开发环境跨域配置的地址 timeout: 30000 // 请求超时时间 }); // request拦截器 service.interceptors.request.use( config => { // 在发送前执行一下取消操作 removePending(config) // 这里把所有的pending请求添加到上面定义的pending数组 config.cancelToken = new CancelToken((c) => { // 这里我是用请求地址&请求方式拼接的字符串，你可以用自己的方式灵活使用 pending.push({ oldUrl: config.url JSON.stringify(config.data) '&' config.method, f: c }) }) return config; }, error => { Promise.reject(error); } ); // response拦截器 service.interceptors.response.use( response => { // 在响应后再执行一下取消操作，把已经完成的请求从pending中移除 removePending(response.config) return response.data; }, error => { return Promise.reject(error); } ); export default service;

然后在项目中引入文件request.js，进行接口处理就可以了

import fetch from './request.js' // 查询机车作业记录 export function test(params) { return fetch({ method: 'get', url: '', params }) }