菜鸟一枚，如有错误，欢迎指正。
安装
npm install axios;
1.引入
import axios from 'axios';
import QS from 'qs'; // 引入qs模块，用来序列化post类型的数据
//vantui的toast提示框组件，大家可根据自己的ui组件更改。
import { Toast } from 'vant';
环境的切换
我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址。
if (process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = '';}
else if (process.env.NODE_ENV == 'debug') {
axios.defaults.baseURL = '';
}
else if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = '';
}
设置请求超时
通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s，就会告知用户当前请求超时，请刷新等。
axios.defaults.timeout = 10000
设置默认的post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
请求拦截
一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候，会首先从本地存储中读取token，如果token存在说明用户已经登陆过，则更新vuex中的token状态，每次发送请求之前判断vuex中是否存在token，如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况，即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
import store from '@/store/index';
axios.interceptors.request.use(
config => {
const token = store.state.token;
token && (config.headers.Authorization = token);
return config;
},
error => {
return Promise.error(error);
})
响应的拦截
返回的状态码为200请求成功，正常拿到数据，否则的话可以跟后台开发人员协商好统一的错误状态码，然后根据状态码进行操作，例如登录过期跳转登陆，错误提示等，下面列举几个常见的操作，其他需求可自行扩展
axios.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
break;
// 403 token过期，登录过期对用户进行提示，清除本地token和清空vuex中token对象，跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
case 403:
Toast({
message: '登录过期，请重新登录',
duration: 1000,
forbidClick: true
});
localStorage.removeItem('token');
store.commit('loginTimeout');
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.fullPath
}
});
}, 1000);
break;
// 404请求不存在
case 404:
Toast({
message: '网络请求不存在',
duration: 1500,
forbidClick: true
});
break;
// 其他错误，直接抛出错误提示
default:
Toast({
message: error.response.data.message,
duration: 1500,
forbidClick: true
});
}
return Promise.reject(error.response);
}
}
});
封装get方法和post方法（还有一些方法如用到可以参考axios官网）
export function get(url, params){
return new Promise((resolve, reject) =>{
axios.get(url, {
params: params
}).then(res => {
resolve(res.data);
}).catch(err =>{
reject(err.data)
})
});}
export function post(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, QS.stringify(params))
.then(res => {
resolve(res.data);
})
.catch(err =>{
reject(err.data)
})
});
}
