/**
 * 全站http配置
 *
 * axios參數(shù)說明
 * isSerialize是否開啟form表單提交
 * isToken是否需要token
 */
import axios from 'axios' 
import querystring from 'querystring'; //格式轉(zhuǎn)換
import store from '@/store/';  //vuex
import router from '@/router/router'  //路由
import { serialize } from '@/util/tool'  //表單序列化
import { getToken } from '@/util/tool' //獲取全局token
import { Message } from 'element-ui' //el-ui的提示
import NProgress from 'nprogress' // 一個加載讀條樣式
import 'nprogress/nprogress.css' // progress bar style

axios.defaults.timeout = 10000;

//返回其他狀態(tài)嗎
axios.defaults.validateStatus = function (status) {
    return status >= 200 && status <= 500; // 默認(rèn)的
};

//跨域請求跛璧，允許保存cookie
axios.defaults.withCredentials = true;

//query參數(shù)編碼
axios.defaults.paramsSerializer = function (params) {
    return querystring.stringify(params);
};

// NProgress Configuration
NProgress.configure({
    showSpinner: false
});
//HTTPrequest攔截
axios.interceptors.request.use(config => {
    NProgress.start() // start progress bar
    const meta = (config.meta || {});
    const isToken = meta.isToken === false;
    if (getToken() && !isToken) {
        //config.headers['Authorization'] = 'Bearer ' + getToken() // 讓每個請求攜帶token--['Authorization']為自定義key 請根據(jù)實(shí)際情況自行修改
        config.headers['accessToken'] = getToken()
    }
    //headers中配置serialize為true開啟序列化
    if (config.method === 'post' && meta.isSerialize === true) {
        config.data = serialize(config.data);
    }
    return config
}, error => {
    return Promise.reject(error)
});
//HTTPresponse攔截
axios.interceptors.response.use(res => {
    NProgress.done();
    const status = Number(res.status) || 200;
    const statusWhiteList = [400] || [];
    const message = res.data.message || 'Network error'; //后端返回的message
    //如果在白名單里則自行catch邏輯處理
    if (statusWhiteList.includes(status)) {
        return Promise.reject(res);
    }
    //如果是401則跳轉(zhuǎn)到登錄頁面
    if (status === 401) {
        router.push({ path: '/login' })); //并在這里做頁面登出操作
    }
    // 如果請求為非200否者默認(rèn)統(tǒng)一處理
    if (status !== 200) {
        Message({
            message: message,
            type: 'error'
        })
        return Promise.reject(new Error(message))
    }
    return res;
}, error => {
    NProgress.done();
    return Promise.reject(new Error(error));
})

export default axios;

表單序列化

//tool.js
export const serialize = data => {
    let list = [];
    Object.keys(data).forEach(ele => {
        list.push(`${ele}=${data[ele]}`)
    })
    return list.join('&');
};