ios循环调用同一个接口_Axios封装之取消重复请求和接口缓存

在平时的单页面项目里，大家肯定接触过axios库，一个易用、简洁且高效，使用Promise管理异步，告别传统callback方式的http库。

最近有个项目里接口调取的频率比较高，接口队列长，然后等待数据的时间就是痛苦的煎熬，特别是一连串有关联的数据交互，每次打开页面我都有种欲死的感觉。经过一番深思改造后，除去接口本身的速度，对于页面的流畅度提高了不少，所以今天就和大家分享一下，怎么封装二次Axios，取消重复请求和接口缓存。安装Axios

npm install axiosAxios基本配置

根目录下新建axios.config.js文件，先写入请求拦截器，响应拦截器，其中要注意接口请求失败的信息处理，根据status判断是否要进行额外的处理，例如下面例子判断statue为401则清除token，重新登录，如果有error.message 就返回错误信息代码100002，用于页面判断显示错误信息。

/** axios封装 请求拦截、响应拦截 */

import axios from 'axios';

import router from '../router';

import qs from 'qs';

/** 设置post请求头 */

instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

/** 请求拦截器*/

instance.interceptors.request.use(

(config) => {

let token = window.localStorage.getItem('token');

token = token ? token : '';

token && (config.headers.Authorization = token);

return config;

},

(error) => Promise.reject(error)

);

/** 响应拦截器 */

instance.interceptors.response.use(

(res) => {

return Promise.resolve(res);

},

// 请求失败(error) => {

if (error) {

let { response } = error;

/** 浏览器报错 */

if (response) {

/** 登录过期 */

if (response.status == 401) {

localStorage.removeItem('token');

router.replace('/login');

}

}

if (error.message) {

if (typeof error.message === 'string') {

response = { code: 100002, message: error.message };

}

} else {

response = {};

}

return Promise.resolve(response ? response : { code: 100002 });

} else {

return Promise.resolve({ code: 100002 });

}

}

);

export defa