import axios from 'axios';
import qs from 'qs'
// 1.根据环境变量配置不同的地址
switch (process.env.NODE_ENV) {
case production:
// 生产环境
axios.defaults.baseURL = 'http://api/xianwnag.cn';
break;
case test:
// 测试环境
axios.defaults.baseURL = 'http://api/xianwnag.cn';
break;
default:
// 开发环境
axios.defaults.baseURL = 'http://127.0.0.1:3000';
break;
}
// 2.配置超时时间
axios.defaults.timeout = 10000;
// 3.跨域是否携带凭证
axios.defaults.withCredentials = true;
// 4.设置请求传递数据的格式(根据后台需要的格式配置 / 可以不设置)
// axios.defaults.headers['Content-Type'] = 'application/x-www-from-urlencoded';
// axios.defaults.transformRequest = data => qs.stringify(data);
// 5.设置请求拦截器 (在客户端发送请求到服务端之间设置一些东西)
// Token校验(JWT) 接收服务器返回的token,存储到vuex/本地存储中。没一次向服务器发送请求,我们应该把token带上
axios.interceptors.request.use((config) => {
// 携带上token
let token = localStorage.getItem('token');
token && (config.headers.Authorization = token);
return config;
}, error => {
return Promise.reject(error)
});
// 6.设置响应拦截器
/*
* 服务器返回信息 => [拦截的统一处理] => 客户端js获取到信息
*/
axios.interceptors.response.use(response => {
// 只返回响应数据
return response.data;
}, error => {
let { response } = error;
if (response) {
// 服务器返回结果
switch (response.status) {
case '401':
// 当前请求需要用户验证
// 即可以跳转路由也可以弄一个蒙层提示信息
break;
case '403':
// token过期
// 服务器拒绝执行禁止访问 可以跳转到登陆页面
break;
case '404':
// 找不到页面
break;
case '500':
// 服务器宕机了
break;
default:
break;
}
} else {
// 服务器没有返回结果
// 判断客户端是否断网
if (!window.navigator.onLine) {
// 断网处理: 跳转到断网页面
return;
}
return Promise.reject(error)
}
})
export default axios;
axios的封装
最新推荐文章于 2024-07-25 22:35:58 发布