axios在VUE中的运用

axios在VUE中的运用"/>

axios在VUE中的运用

阻止axios重复请求与axios请求失败后重新发起请求

axios是vue框架中主流的后台交互技术

阻止axios重复请求

axios的制作者为开发者们提供了请求拦截器与响应拦截器，我们可以在此进行操作 

在操作拦截器先我们先封装一个用以判断数据请求的函数

judge_repetition 判断当前请求在短时间内是否重复，如若重复则利用cancel取消之

//用来存放短时间内请求过的接口地址
let urlList = [];//判断当前请求接口在短时间内是否请求过function judge_repetition(urlList , url, cancel, error) {let errorMsg = error || "";for (let i = 0; i < urlList .length; i++) {if (urlList [i] === url) {cancel(errorMsg);return;}}urlList .push(url);
};

然后再封装一个判断当前请求是否可以继续的函数

anewRequest 通过在遍历urlList判断当前请求是否可以继续

function anewRequest (urlList, url) {for (let i = 0; i < urlList.length; i++) {if (urlList[i] === url) {urlList.splice(i, 1);break;}}
};

 在请求拦截器中对请求进行处理

instance.interceptors.request.use(function (config) {// 在发送请求之前进行判断let cancel;// 设置cancelToken对象config.cancelToken = new axios.CancelToken(function (c) {cancel = c;});// 调用函数处理judge_repetition(urlList, config.url, cancel, `${config.url} 请求被中断`);return config;},function (error) {// 对请求错误做些什么return Promise.reject(error);}
);

在相应拦截器中对重复请求进行处理

instance.interceptors.response.use(function (response) {// 对响应数据做点什么setTimeout(() => {allowRequest(urlList, response.config.url);}, 1000);return response;},function (error) {// 对响应错误做点什么if (axios.isCancel(error)) {} else {// 使用定时器，延缓请求，是相同请求在短时间内不会重复请求setTimeout(() => {allowRequest(urlList, error.config.url);}, 3000);}return Promise.reject(error);}
);

在页面中调用axios 

import axios from "axios";

在请求中调用方法 axios的请求封装可见

const CancelToken = axios.CancelToken;let cancels;get("********", {cancelToken: new CancelToken(function executor(c) {cancels = c;}),})cancels();

效果如下

axios请求失败后重新发起请求

设置重新请求的间隙与次数（非必要）

// 重试次数，共请求2次
axios.defaults.retry = 1
// 请求的间隙
axios.defaults.retryDelay = 1000

在请求拦截器中处理返回错误状态代码的接口

instance.interceptors.response.use(undefined, function axiosRetryInterceptor(err) {// 发送请求后返回错误状态码的那个接口的请求配置，都存在宇err.config里面let config = err.config;// 如果配置不存在或未设置重试选项，则拒绝// 重试请求的次数，如果你设置了1，就请求2次，如果是5，就请求6次if (!config || !config.retry) return Promise.reject(err);// 设置变量以跟踪重试次数config.__retryCount = config.__retryCount || 0;// 判断是否超过总重试次数,超过retry设置的次数的时候，就不再重复发起请求了if (config.__retryCount >= config.retry) {// 返回错误并退出自动重试return Promise.reject(err);}// 增加重试次数config.__retryCount += 1;//打印当前重试次数console.log(config.url + ' 自动重试第' + config.__retryCount + '次');// 创建新的Promiselet backoff = new Promise(function (resolve) {setTimeout(function () {resolve();}, config.retryDelay || 1);});// 返回重试请求return backoff.then(function () {return axios(config);});
});

在请求中调用

get('******', {retry: 5,retryDelay: 1000,timeout: 6000
}).then(res => {console.log('success', res.data);}).catch(err => {console.log('failed', err);});