axios 二次封装

这里只是写了简单得封装，如有需要可自行翻阅文档，根据需要封装你想封装得东西。

请求拦截器 =>

当用户向后台请求数据的时候，后端会传token到前端验证，如果token过期了，客户端可以做出对应的操作，将服务器返回的token存储到本地存储或者vuex中，每一次向服务器请求时携带一个token，如果没有携带即非法访问

引入axios

import axios from 'axios';
import qs from 'qs';// qs为第三方库

axios全局配置项

//需要配置打包
switch(process.env.NODE_ENV){
//可以在根目录的 package.json 配置 NODE_ENV 
case 'production':
axios.defaults.baseURL = "生产环境地址";
break;
case 'test'
axios.defaults.baseURL ="测试环境地址";
default;
axios.defaults.baseURL ="开发环境地址";
}
/*
设置超时时间
设置是否允许跨域携带身份凭证
*/
axios.defaults.timeout = 12000;
axios.defailts.withCredentials = true;

/*
设置请求传输数据的格式
只支持POST请求，根据实际要求决定设置不设置
*/
axios.defailts.headers['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defailts.transformRequest = data => {qs.stringify(data)};


请求拦截器

客户端发送请求 => [请求拦截器] => 服务器

axios.interceptors.request.use(
config => {//请求成功时执行
	//获取本地存储中的token
	let token = localStorage.getItem('token');
	token && (config.headers.Authorization = token);
	return config;
},
error => {//请求失败时执行
	return Primise.reject(error)
}
)


响应拦截器

服务器返回信息 => [响应拦截器统一处理] => 客户端

axios.interceptors.response.use(
response=>{
 	return response.data;
},error => {//拦截失败
return Primise.reject(error);
let {response } = error;
if(response) {
    switch (response.status) {
       case 401://权限问题,提示未登录或无权限等；
       break;
       case 403://服务器拒绝执行 （token过期）
       break;
       case 404://找不到页面
       break;
    }
} else {
    //服务器连结果都没有返回
    if(!window.navigator.onLine) {
        //断网处理：跳转断网页面/提示网络错误等等
        return;
    }
    return Promise.reject(error)
	}
}
)

参考文档：http://axios-js.com/zh-cn/docs/#%E5%93%8D%E5%BA%94%E7%BB%93%E6%9E%84