class Http {
    constructor(config) {
        this.axios = axios;
        this.axiosInterceptor = undefined;
        // 公共的 header
        let defaultHeaders = {
            'Content-Type': 'application/json;charset=UTF-8',
            'Accept': 'application/json', // 通過頭指定，獲取的數(shù)據(jù)類型是JSON 'application/json, text/plain, */*',
            'x-end-point': '.10.'
        }
        if(config?.headers){
            for (let i in config.headers) {
                defaultHeaders[i] = config.headers[i];
            }
        }
        axios({
            // `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL。
            // 它可以通過設(shè)置一個 `baseURL` 便于為 axios 實(shí)例的方法傳遞相對 URL
            baseURL: config?.baseURL,
            // `url` 是用于請求的服務(wù)器 URL
            url: config?.url,
            // `method` 是創(chuàng)建請求時使用的方法
            method: config?.method || 'get',
            // `headers` 是即將被發(fā)送的自定義請求頭
            headers: {...defaultHeaders},
            // `params` 是即將與請求一起發(fā)送的 URL 參數(shù)
            // 必須是一個無格式對象(plain object)或 URLSearchParams 對象
            params: config?.method === 'get' ? config?.params || {} : {},
            // `paramsSerializer` 是一個負(fù)責(zé) `params` 序列化的函數(shù)
            // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
            paramsSerializer: function(params) {
                return Qs.stringify(params, {arrayFormat: 'brackets'})
            },
            // `data` 是作為請求主體被發(fā)送的數(shù)據(jù)
            // 只適用于這些請求方法 'PUT', 'POST', 和 'PATCH'
            // 在沒有設(shè)置 `transformRequest` 時，必須是以下類型之一：
            // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
            // - 瀏覽器專屬：FormData, File, Blob
            // - Node 專屬： Stream
            data: config?.method === 'post' ? config?.params || {} : {},
            // `timeout` 指定請求超時的毫秒數(shù)(0 表示無超時時間)
            // 如果請求話費(fèi)了超過 `timeout` 的時間，請求將被中斷
            timeout: 0,
            // `withCredentials` 表示跨域請求時是否需要使用憑證
            withCredentials: false, // default 為true則產(chǎn)生跨域,跨域攜帶cookie
            // `responseType` 表示服務(wù)器響應(yīng)的數(shù)據(jù)類型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
            responseType: 'json', // default
        });
        // 添加請求攔截器
        axios.interceptors.request.use( (config) =>  {
            // 在發(fā)送請求之前做些什么
            return config;
        }, function (error) {
            // 對請求錯誤做些什么
            return Promise.reject(error);
        });
        // 添加響應(yīng)攔截器
        axios.interceptors.response.use((res) => {
            const { status, data } = res;
            // 對錯誤狀態(tài)提示進(jìn)行處理
            let message = ''
            if (status < 200 || status >= 300) {
                // 處理http錯誤，拋到業(yè)務(wù)代碼
                message = this.showResState(status)
                if (typeof res.data === 'string') {
                    res.data = {code:status, message }
                } else {
                    res.data.code = status
                    res.data.message = message
                }
            }
        return res.data;
        }, function (error) {
            // 對響應(yīng)錯誤做點(diǎn)什么
            return Promise.reject(error);
        });
    }
    get(url,params={}){
        // 為給定 ID 的 user 創(chuàng)建請求
        return new Promise((resolve, reject) => {
            this.axios.get(url,{
                params
            }).then(response => {
                // 2. 如果成功了, 調(diào)用resolve(value)
                resolve(response);
            })
                .catch(error => {
                    // 3. 如果失敗了, 不調(diào)用reject(reason), 而是提示異常信息
                    reject(error)
                    // message.error('請求出錯了: ' + error.message).then(r => {});
                }).finally(() => {
            })
        });
    }
    post(url,params={}){
        return new Promise((resolve, reject) => {
            this.axios.post(url, params).then(response => {
                // 2. 如果成功了, 調(diào)用resolve(value)
                resolve(response);
            })
                .catch(error => {
                    // 3. 如果失敗了, 不調(diào)用reject(reason), 而是提示異常信息
                    reject(error)
                    // message.error('請求出錯了: ' + error.message).then(r => {});
                }).finally(() => {
            })
        });
    }
    showResState (state) {
        let message = '';
        // 這里只做部分常見的示例，具體根據(jù)需要進(jìn)行配置
        switch (state) {
            case 400:
                message = '請求錯誤(400)'
                break
            case 401:
                message = '未授權(quán)，請重新登錄(401)'
                break
            case 403:
                message = '拒絕訪問(403)'
                break
            case 404:
                message = '請求出錯(404)'
                break
            case 500:
                message = '服務(wù)器錯誤(500)'
                break
            case 501:
                message = '服務(wù)未實(shí)現(xiàn)(501)'
                break
            case 502:
                message = '網(wǎng)絡(luò)錯誤(502)'
                break
            case 503:
                message = '服務(wù)不可用(503)'
                break
            default:
                message = `連接出錯(${state})!`
        }
        return `${message}，請檢查網(wǎng)絡(luò)或聯(lián)系網(wǎng)站管理員！`
    }
    // 插件初始化時會傳入所需的配置項
    autoAddToken (config) {
        // 在請求階段時修改 config 配置項為其添加 token 具體屬性名稱可自定義
        config.headers ??= {}
        config.headers.Authorization = localStorage.token || null
        return config
    }
}
export default Http;

if (!this.interceptor) {
// 添加響應(yīng)攔截器
this.interceptor = axios.interceptors.response.use((res) => {
        const { status, data } = res;
        // 對錯誤狀態(tài)提示進(jìn)行處理
        let message = ''
        if (status < 200 || status >= 300) {
            // 處理http錯誤，拋到業(yè)務(wù)代碼
            message = this.showResState(status)
            if (typeof res.data === 'string') {
                res.data = {code:status, message }
            } else {
                res.data.code = status
                res.data.message = message
            }
        }
    return res.data;
    }, function (error) {
        // 對響應(yīng)錯誤做點(diǎn)什么
        return Promise.reject(error);
    });
  }

import axios from "axios";
/* 將攔截器 置于封裝類之外 */
// 添加請求攔截器
axios.interceptors.request.use( (config) =>  {
    // 在發(fā)送請求之前做些什么 添加 token 等鑒權(quán)功能
    //...
    return config;
}, function (error) {
    // 對請求錯誤做些什么
    return Promise.reject(error);
});
// 添加響應(yīng)攔截器
axios.interceptors.response.use((res) => {
    const { status } = res;
    // 在發(fā)送結(jié)果之前做些什么  對錯誤狀態(tài)提示進(jìn)行處理
    //...
    return res.data;
}, function (error) {
    // 對響應(yīng)錯誤做點(diǎn)什么
    return Promise.reject(error);
});
class Http {
    constructor(config) {
        this.axios = axios;
        // 這里仍需對配置進(jìn)行處理，代碼省略了
        this.config = config;
    }
    // Get 請求
    get(url,params={},headers={}){
        // ...
    }
    // POST 請求
    post(url,params={},headers={}){
        // ...
    }
}
export default Http;
// 無特殊需求的只需使用這個一個對象即可 公共 header 可在此配置, 如需多個實(shí)例 可按照此方式創(chuàng)建多個進(jìn)行導(dǎo)出
export const Axios = new Http({
    headers: {
        'x-http-token': 'xxx'
    }
});