axios 封裝【滿足常規資料上傳及file上傳】

• request.js

/* 封裝axios */
const axios = require('axios');

import {
    featchApiHeader,
    formApiHeader,
    baseApiUrl
} from './requestUtil.js';

const {
    Loading,
    Message
} = require('element-ui');

import router from '@/routes/routes'
import store from '@/store/store'
import qs from 'qs'

let loadingInstance = null; //loading例項

/* 建立例項時的基礎預設配置，可以在請求時進行重寫覆蓋 */
const instance = axios.create({
    baseURL: baseApiUrl,
    timeout: 5000,
    method: 'post',
    headers: featchApiHeader
})

/* 攔截器 */
/**
 * @Description: 
 * - 在request 內通過對data型別的校驗，區分是一般的post還是formdata檔案上傳
 * - 根據型別的不同改變成不同的headers
 * - 
 */
instance.interceptors.request.use(
    config => {
        loadingInstance = Loading.service({
            text: "請求中...",
            spinner: 'el-icon-loading'
        });
        if (config.method.toLowerCase() == "post") {
            let newdata = config.data;
            if (config.data instanceof FormData) { //檔案類,檔案類不需要stringify
                Object.assign(config.headers, formApiHeader); //修改`Content-Type`
                newdata.append("accessStr", localStorage.getItem("apiToken") || '')
            } else { //非檔案類,stringify
                //空處理
                newdata = (typeof newdata == 'object' && Object.keys(newdata).length >= 0) ? newdata : {};

                newdata = {
                    ...newdata,
                    accessStr: localStorage.getItem("apiToken") || ''
                }
                newdata = qs.stringify(newdata);
            }
            config.data = newdata;
        }
        return config
    },
    error => {
        loadingInstance.close();
        Message({
            showClose: true,
            message: '請求錯誤，請您稍後重試！',
            type: 'error'
        });
        return Promise.reject(error)
    },
)

instance.interceptors.response.use(
    response => {
        loadingInstance.close();
        let resStatus = response.status;
        if (resStatus == 200) {
            return Promise.resolve(response)
        } else {
            return Promise.reject(response)
        }
    },
    error => {
        loadingInstance.close();
        if (error.response.status) {
            switch (error.response.status) {
                case 401: //未登入,從哪裡來回哪裡去
                    router.replace({
                        path: '/index',
                        query: {
                            redirect: router.currentRoute.fullPath
                        }
                    });
                    break;
                case 403: //token過期
                    Message({
                        message: '登入過期，請重新登入',
                        duration: 1500
                    });
                    localStorage.removeItem("apiToken"); //清除token
                    store.commit("loginSuccess", ""); //全域性通知loginSuccess為空
                    break;
                case 404:
                    Message({
                        message: '網路請求不存在',
                        duration: 1500
                    });
                    break;
                case 500, 501, 503: //服務端錯誤
                    Message({
                        message: '請求異常，請您稍後重試！',
                        duration: 1500
                    });
                    break;
                default:
                    Message({
                        message: error.response.data.message,
                        duration: 1500
                    });
                    break;
            }
            return Promise.reject(error)
        }

    },
)

export default instance
 

• requestUtil.js

/**
 * @Description: 
 * - 處理請求頭，
 * - apitoken、針對一般的post和檔案上傳，設定不同的headers
 * - 根據環境獲取不同的baseUrl
 */

const getApitoken = () => {
    return localStorage.getItem("apiToken") || '' //在登入時得到後儲存起來
}

const commmonHeader = {
    'Accept': 'application/json',
    'Authorization': `Bearer ${getApitoken()}`
}

/* 常規的 */
export const featchApiHeader = {...commmonHeader,
    'Content-Type': 'application/x-www-form-urlencoded'
}

/* 檔案的 */
export const formApiHeader ={...commmonHeader, 
    'Content-Type': 'multipart/form-data'
}

export const baseApiUrl = process.env.VUE_APP_API_BASEURL