axios统一拦截配置
在vue项目中，和后台进行数据交互使用axios。要想统一处理所有的http请求和响应，就需要使用axios的拦截器。通过配置http response inteceptor 统一拦截后台的接口数据，针对异常的情况可以做统一拦截处理。
项目背景：vue+vuex+elementUI进行开发
axios详细说明手册：https://www.kancloud.cn/yunye/axios/234845
1、安装axios
npm install --save axios
2、在src/utils目录下，新建一个fetch.js文件，用于专门写axios的统一拦截操作。（具体路径存放已经文件名自定义）
在fetch.js文件中，引入axios、element-ui的部分元素、引入vuex中的store、另外在引入其他相关的方法，例如获取token的方法
import axios from 'axios';
import { Message, MessageBox } from 'element-ui';
import store from '../store';
import { getToken } from 'utils/auth';
// 创建axios实例
const service = axios.create({
// baseURL: process.env.BASE_API, // api的base_url
timeout: 60000 // 请求超时时间，1分钟
});
// request拦截器
service.interceptors.request.use(config => {
// Do something before request is sent
if (store.getters.token) {
config.headers['Authorization'] = getToken(); // 让每个请求携带token--['X-Token']为自定义key 请根据实际情况自行修改
}
return config;
}, error => {
Promise.reject(error);
})
// respone拦截器
service.interceptors.response.use(
response => {
/**
* 下面的注释为通过response自定义code来标示请求状态，当code返回如下情况为权限有问题，登出并返回到登录页
* 如通过xmlhttprequest 状态码标识 逻辑可写在下面error中
*/
const res = response.data;
if (response.status === 401 || res.status === 40101) {
MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', { confirmButtonText: '重新登录', cancelButtonText: '取消', cancelButtonClass: 'calBtnClass', type: 'warning' }).then(() => {
store.dispatch('FedLogOut').then(() => {
location.reload(); // 为了重新实例化vue-router对象 避免bug
});
})
return Promise.reject('error');
}
if (res.status === 40001) {
Message({ message: '账户或密码错误！', type: 'warning' });
return Promise.reject('error');
}
if (response.status !== 200 && res.status !== 200) { //此处并不能拦截全部异常情况，因为res是后台接口返回的数据，有一些由于不规范，没有带status属性，导致没有被拦截
Message({ message: res.message, type: 'error', duration: 6 * 1000 });
} else {
//只有成功后，才可以进行操作
return response.data;
}
},
error => {
Message({
message: error.message,
type: 'error',
duration: 6 * 1000
});
return Promise.reject(error);
}
);
export default service;
以上代码，是一个完整的axios统一拦截配置处理。
额外话：
在学习axios的时候，对于defaults是很迷惑，有一些写法是axios.defaults.XXX。在了解以后，才知道axios的执行顺序是：默认值，实例默认值，参数设置值
//设置默认值，设置默认超时时间为6000ms axios.defaults.timeout="6000" //创建实例，设置默认超时时间为8000ms const instance = axios.create(); instance.defaults.timeout= 8000 //请求，设置具体请求超时时间 instance.get('/url',{ timeout:1000*10 })
3、fetch.js配置完成以后，在调用请求的文件引入该文件即可
例如：本人习惯的写法是把所有的请求方法写到一个js文件中，页面需要调用的时候，在import该文件。
例如，在src/login.js文件中，存放和登录有关的全部请求方法，并在改文件中引入fetch.js
import fetch from 'utils/fetch'; //修改密码 export function editPwsFun(obj,timeout) { return fetch({ url: '/api/admin/user/current/updatePassword', method: 'post', data: obj,
timeout }) } //查询当前登录用户信息 export function getCurUserInfo() { return fetch({ url: '/api/admin/user/current/user', method: 'get', }); } //修改当前用户信息 export function editCurUInfo(obj) { return fetch({ url: '/api/admin/user/current/updateUser', method: 'post', data: obj }) } // 执行登录 export function loginByEmail(username, password) { const data = { username, password}; return fetch({ url: '/api/auth/jwt/token', method: 'post', data }); } // logout注销 export function logout(token) { return fetch({ url: '/api/auth/jwt/invalid', method: 'post', params: { token } }); } // 获取用户信息 export function getInfo(token) { return fetch({ url: '/api/admin/user/front/info', method: 'get', params: { token } }); }
4、接口文件完成以后，在vue文件中直接引入，并调用该方法即可。
<script> import {editPwsFun, editCurUInfo, getCurUserInfo } from '../../api/login'; export default { methods: { updateUserInfo() { getCurUserInfo().then(resopnse=> { if (resopnse.status==200) { this.formUInfo=resopnse.data; this.dialogUInfoVisible = true; } else { this.dialogUInfoVisible=false; } }) } } } </script>
