axios 请求取消及重发

/*在没登录完之前所有的请求全部取消，登录成功后把取消的请求列表重新发起*/
import axios from 'axios';
const whiteList = ['post /api/login'];
const resetFetchList = [];
let isLogin = false;// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么// console.log(config);const requestMark = `${config.method} ${config.url}`; // 请求标识 为了在响应的时候删除请求队列中的数据const flag = resetFetchList.findIndex(item=>item.requestMark === requestMark);if (flag !== -1) {// resetFetchList[flag].cancel(); // 删除重复请求时用resetFetchList.splice(flag,1); // 在等待重新发起的请求列表中移除}const cancelToken = axios.CancelToken;const source = cancelToken.source();config.cancelToken = source.token; config.cancel = source.cancel;config.requestMark = requestMark; //添加唯一标识符if (!whiteList.includes(requestMark) && !isLogin) {resetFetchList.push(config);config.cancel();}return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 对响应数据做点什么if(response.config.requestMark === 'post /api/login' /** 并且登录成功 */) {isLogin = true;resetFetchList.forEach(item => {axios.request(item);})}// console.log(currentFetchList);return response;}, function (error) {// 对响应错误做点什么return Promise.reject(error);
});export default axios;

axios 请求取消及重发相关推荐

vue项目中 axios请求拦截器与取消pending请求功能 - 年少、 - 博客园
在开发vue项目中,请求是不可缺少的,在发送请求时常常需要统一处理一些请求头参数等设置与响应事件,这时利用请求拦截器再好不过. 这里以axios请求为例实现了设置统一请求头添加token, 其中to ...
【Day01】你有封装过 axios 吗？主要是封装哪些方面？如何中断 axios 请求？
你有封装过 axios 吗?主要是封装哪些方面?如何中断 axios 请求? 一.封装过哪些方面? 1.1 http 封装 1.2 api 封装 1.2.1 总 api 接口的映射 1.2.2 建立一 ...
Cli4.5.x 中使用axios请求数据
Cli4.5.x 中使用axios请求数据文章目录 Cli4.5.x 中使用axios请求数据前言一.安装并配置axios 1.安装axios 2.vue-axios 二.各种请求方法三.请求 ...
axios 请求拦截器响应拦截器
一. 拦截器介绍一般在使用axios时,会用到拦截器的功能,一般分为两种:请求拦截器.响应拦截器. 请求拦截器在请求发送前进行必要操作处理,例如添加统一cookie.请求体加验证.设置请求头等,相 ...
Ajax请求，JQuery发送请求，Axios请求，Fetch请求总结
常见的请求方式 1.Ajax请求定义: 同步与异步的区别: Ajax的工作原理: 实现AJAX的基本步骤: Get请求: Post请求: 2.JQuery发送请求 Get请求: Post请求: 3. ...
axios请求封装与开发环境proxyTable代理
axios请求封装与开发环境proxyTable代理详解一.axios请求封装 1. axios安装与使用 1.1 安装 1.2 引入 1.3 环境切换 1.4 设置请求超时 1.5 请求头设置 1 ...
axios请求REST接口示例
axios功能简介从浏览器中创建XMLHttpRequests 从node.js创建http请求支持Promise API 拦截请求和响应转换请求数据和响应数据取消请求自动转换JSON数据 ...
React Axios 请求解决跨域问题
网上看了很多的方案,但是不知道为什么,作为初学者,对react不太清楚的话,解决跨域还是有很多的问题.这篇博客针对小白,第一次调试react 跨域问题,甚至第一次使用Axios ,第一次... 废话就 ...
axios请求GBK页面中文乱码解决方法
axios请求GBK页面中文乱码解决方法参考文章: (1)axios请求GBK页面中文乱码解决方法 (2)https://www.cnblogs.com/bjhl/articles/10514038 ...

axios 请求取消及重发

axios 请求取消及重发相关推荐

最新文章

热门文章