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

vue中用axios发送get请求(vue中对axios已发送请求取消操作的封装)(1)

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

Axios 使用 CancelToken 取消请求

查看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 }) }

,

免责声明:本文仅代表文章作者的个人观点,与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺,请读者仅作参考,并自行核实相关内容。文章投诉邮箱:anhduc.ph@yahoo.com

    分享
    投诉
    首页