封装一下vue中的axios

此次封装用以解决： （对于登录功能的可以直接使用，其他网络请求也可以直接用，如果有洁癖，可以把token有关的几行代码删掉）

ps:使用时得的引入axios时： import axios from '这个文件的名字及相对路径'

• 接受后台token
• post参数自动转换,省略qs.stringify()
• 后台token过期之后自动清除本地数据，以便下次再次输入账号密码
• 更好的错误提示信息

/**
 * 封装网络请求
 */

import axios from "axios"
import qs from "querystring"
import store from '../store'
import router from '../router'

//token过期之后重新回登录界面
const toLogin = () =>{
    router.push("/login")
}
// 错误信息响应方法
const errroHandle = (status,other) => {
    switch(status){
        case 400:
            console.log("服务器无法理解请求信息");
            break;
        case 401:
            console.log("用户信息验证失败");
            localStorage.removeItem("token"); // 可选项
            toLogin();
            break;
        case 403:
            console.log("请求被限制");
            localStorage.removeItem("token"); // 可选项
            toLogin();
            break;
        case 404:
            console.log("客户端请求信息错误");
            break;
        default:
            console.log(other);
            break;
    }
}

// 创建axios对象
const instance = axios.create({
    timeout:5000
})

// 挂在全局对象
instance.defaults.baseUrl = "";
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 拦截器：请求拦截和响应拦截  post请求参数需要转码
// axios的返回值对象要求是一个promise对象
instance.interceptors.request.use(config =>{
    if(config.method === "post"){
        config.data = qs.stringify(config.data)
    }
    if(store.state.token){
        config.headers.authorization = store.state.token;
    }
    return config;
},error => Promise.reject(error))

instance.interceptors.response.use(
    // 成功
    response => response.status === 200 ? Promise.resolve(response) :Promise.reject(response),
    // 失败
    error => {
        const { response } = error;
        if(response){
            errroHandle(response.status,response.data)
            return Promise.reject(response)
        }else{
            // 错误信息都无法返回
            console.log("请求被中断");
        }
    }
)

export default instance