主要使用以下檔案

config.js：ajax 請求配置核心檔案

loading.js：element-ui 請求加載影片

index.js：二次封裝 config.js 請求并匯出該方法，配置請求攔截器、回應攔截器

index.vue：呼叫 ajax 的示例頁面

注意：推薦在 api 目錄統一管理所有介面，如果遇到報錯請調整正確參考路徑

config.js

import loading from './loading.js'; // 加載影片類

const animation = false; // 介面加載影片
const intTimer = 10; // 介面請求超時時間（秒）

class Config {
    constructor(data) {
        this.method = data.method;
        this.url = data.url;
        this.param = data.param || {};
        this.header = data.header || {};
        this.interceptors = data.interceptors;
        this.response = data.response;

        return this.filter();
    }

    // 創建XHR物件
    createXHR() {
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            return new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            return new ActiveXObject('Microsoft.XMLHTTP');
        }
    }

    // HTTP請求
    xhrRequest(header, method, url, param, async, interceptors, response) {
        return new Promise(resolve => {
            var xhr = this.createXHR();
            if (animation == true) {
                loading.requestStart(); // 執行影片
            }

            // 請求攔截
            if (interceptors({ header, method, url: this.url, param: this.param, async })) {
                xhr.open(method, url, async);
                xhr.timeout = 1000 * intTimer; //設定xhr請求的超時時間
                Object.keys(header).map(key => {
                    xhr.setRequestHeader(key, header[key]);
                });
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; application/json; charset=utf-8');
                xhr.send(param);
                xhr.onreadystatechange = () => {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        loading.requestEnd(); // 結束影片
                        try {
                            let data = https://www.cnblogs.com/noxussj/p/JSON.parse(xhr.responseText);

                            resolve(response(data, { header, method, url: this.url, param: this.param, async }));
                        } catch (error) {
                            console.log('介面回傳沒有任何資訊!');
                            resolve(false);
                        }
                    } else {
                        return 'request is unsucessful ' + xhr.status;
                    }
                };
            } else {
                console.error('request interceptor', '請求未發出, 請求攔截器已生效!');
            }

            // 請求超時方法
            xhr.ontimeout = function(e) {
                console.log('介面請求超時!');
                loading.requestEnd(); // 結束影片
            };

            // 請求錯誤方法
            xhr.onerror = function(e) {
                console.log('介面請求失敗');
                loading.requestEnd(); // 結束影片
            };
        });
    }

    // 引數轉換
    convParams(param) {
        let mark = '?';
        let hasMark = this.url.indexOf(mark) > 0; // 是否包含特殊字符
        if (hasMark) {
            mark = '&';
        }

        let newParams = '';
        let i = 0;
        for (let key in param) {
            if (i > 0) {
                newParams += `&${key}=${param[key]}`;
            } else {
                newParams += `${mark}${key}=${param[key]}`;
            }
            i++;
        }
        return newParams;
    }

    // 資料GET、POST請求處理
    filter() {
        let obj = {
            header: this.header,
            method: this.method,
            url: this.url,
            param: {},
            async: true,
            interceptors: this.interceptors,
            response: this.response
        };

        // 介面名稱拼接位置：(1、url) (2、param)

        let newParams = this.convParams(this.param);
        if (this.method == 'GET') {
            obj.url += newParams;
        } else {
            newParams = newParams.replace('?', '');
            obj.param = newParams;
        }

        return this.xhrRequest(obj.header, obj.method, obj.url, obj.param, obj.async, obj.interceptors, obj.response);
    }
}

export default Config;

loading.js

import { Loading } from 'element-ui';

class animation {
    constructor() {
        this.needLoadingRequestCount = 0;
        this.loading
    }

    /**
     * 影片開始
     */
    requestStart() {
        if (this.needLoadingRequestCount === 0) {
            this.loading = Loading.service({
                lock: true,
                text: 'loading...',
                background: 'rgba(0, 0, 0, 0.7)'
            });
        }
        this.needLoadingRequestCount++;
    }

    /**
     * 影片結束
     */
    requestEnd() {
        if (this.needLoadingRequestCount <= 0) return;
        this.needLoadingRequestCount--;
        if (this.needLoadingRequestCount === 0) {
            this.loading.close();
        }
    }
}


export default new animation()

index.js

import Config from './config.js';

/**
 * 介面請求方法
 * @func request
 * @param {Object} method 請求方式： 僅支持GET、POST
 * @param {String} url 請求地址
 * @param {Object} param 請求引數
 */
let request = option => {
    // 配置默認請求引數

    return new Config({
        header: {
            Authorization: 'APPCODE edc39cc1dc5f4c139498322115b99e51'
        },
        method: option.method,
        url: option.url,
        param: option.param,
        interceptors: interceptors,
        response: response
    });
};

/**
 * 請求攔截器
 * @func interceptors
 */
let interceptors = config => {
    return true;
};

/**
 * 回應攔截器
 * @func response
 */
let response = (data, config) => {
    let res;

    // 處理回傳格式
    if (data.res) {
        res = data.res;
    } else if (data.data) {
        res = data.data;
    } else {
        res = data;
    }
    return res;
};

export default request;

index.vue

<script>
import request from './index.js';

export default {
    mounted() {
        new request({
            method: 'GET', // 請求方式： GET、POST
            url: 'http://10.10.10.10/xxx/xxx', // 請求地址
            param: {} // 請求引數
        }).then(res => {
            console.log('res', res);
        });
    }
};
</script>

文章的內容/靈感都從下方內容中借鑒

• 【持續維護/更新 500+前端面試題/筆記】https://github.com/noxussj/Interview-Questions/issues

• 【大資料可視化圖表插件】https://www.npmjs.com/package/ns-echarts

• 【利用 THREE.JS 實作 3D 城市建模（珠海市）】https://3d.noxussj.top/

標籤：JavaScript

上一篇：【odoo】【知識雜談】單一實體多庫模式下定時任務的問題分析

下一篇：JavaScript 字串(上)