import axios from "axios";
import qs from "qs";

import { Message, MessageBox } from "element-ui";

// 建立axios例項
const service = axios.create({
    withCredentials: true,
    // baseURL: '/api', // api的base_url
    timeout: 10000 // 請求超時時間
});
// request攔截器
service.interceptors.request.use(
    config => {
        config.data 
 
&& (config.data = qs.stringify(config.data));
        // 請求頭部帶上token
        localStorage.getItem("mskj_token") &&
            (config.headers.Authorization = `token ${localStorage.getItem(
                "mskj_token"
            )}`);
        return config;
    },
    error => {
        
 
return Promise.reject(error);
    }
);
// respone攔截器
service.interceptors.response.use(
    response => {
        // 如果code不存在則返回正確資料 code存在則是各種失敗狀態
        if (!response.data.code || response.data.code == 200) {
            return response;
        } else {
            // code存在 錯誤提示
            if (response.data.code == 401) {
                MessageBox.confirm(
 
"你已離線", "確定登出", {
                    confirmButtonText: "重新登入",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    localStorage.removeItem("mskj_token");
                    location.reload(); // 重新例項化vue-router物件 避免bug
                });
            } else if (response.data.code == 400) {
                // 登入失敗
                Message.error("賬號或密碼錯誤");
                return false;
            } else {
                Message.error(
                    `發生了錯誤：${response.data.code} - ${
                        response.data.message
                    }`
                );
                return false;
            }
        }
    },
    error => {
        Message({
            message: `發生了錯誤：${error.response.status}
             - 
            ${error.response.statusText}`,
            type: "error",
            duration: 1.5 * 1000
        });
        return Promise.reject(error.response); // 返回介面返回的錯誤資訊
    }
);

export default service;

使用

import axios from "common/js/http";
import { globalApi } from "common/global";

// 登入
export function login(data) {
    return axios.post(`${globalApi}/user/login`, data).then(res => {
        return Promise.resolve(res);
    });
}