Axios 二次封装
axios的二次封装
// 引入模块
import axios from "axios";
import qs from 'qs';
/*
根据环境变量区分接口的默认地址
*/
switch (process.env.NODE_ENV) {
// 生产环境
case 'production':
axios.defaults.baseURL = "http://api.zhufengpeixun.cn";
break;
// 测试环境
case "test":
axios.defaults.baseURL = "http://192.168.20.12:8080";
break;
// 开发环境(development)
default:
axios.defaults.baseURL = "http://127.0.0.1:3000";
}
/*
设置超时时间和跨域是否允许携带凭证
*/
axios.defaults.timeout = 10000; // 10秒
axios.defaults.withCredentials = true;
/*
设置POST请求传递数据的格式(看服务器要求什么格式)
x-www-form-urlencoded
*/
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = data => qs.stringify(data); // 可以将post请求的数据转成键:值对的形式存储 例如:name="张三";
/*
设置请求拦截器
客户端发送请求 ——> [请求拦截器] ——> 服务器
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);
})
/*
响应拦截器
服务器返回信息 ——> [拦截的统一处理] ——> 客户端JS获取到信息
*/
// axios.defaults.validateStatus = status => {
// // 自定义响应成功的HTTP状态码
// return /^(2|3)\d{2}$/.test(status);
// }
axios.interceptors.response.use(response => {
return response.data;
}, error => {
let { response } = error;
if (response) {
// 请求已发出,只不过不是200系列,设置不同状态的不同处理
switch (response.status) {
case 401: // 当前请求需要用户验证(一般是未登录)
break;
case 403: // 服务器已经处理请求,但是拒绝执行它(一般是TOKEN过期)
localStorage.removeItem(token);
// 跳转到登录页
break;
case 404: // 请求失败,请求所希望得到的资源未被在服务器上发现(找不到页面)
break;
}
} else {
// 服务器结果都没有返回
if (!window.navigator.onLine) {
// 断网处理:可以跳转到断网页面
return;
}
return Promise.reject(error)
}
})
// 默认暴露
export default axios;
更多推荐
所有评论(0)