1.jq的ajax是對原生的xhr進行的封裝，封裝的基本上很全面，沒啥大的毛病；

但是一般來說，做jq專案，還是很有必要用promise進行二次封裝成自己需要的；

比如超時的設定，token的設定，返回頭資訊型別的設定，對於介面報錯的統一處理，特定code的處理等等；

下圖貼上我get請求的一般寫法：

function ajaxGet(url, data) {
    return new Promise(function(resolve, reject) {
        $.ajax({
            type: "get",
            timeout: 120000, //
 
超時時間設定，單位毫秒
            url: url,
            data: data,
            headers: {
                token: window.localStorage.getItem("token"),
            },
            success: function(res) {
                if (res.code == 200) {
                    resolve(res);
                } else if (res.code == 403) {
                    window.localStorage.removeItem(
 
'token');
                    $.message({
                        // message: '登入過期,請重新登入',
                        message: res.msg,
                        type: 'error',
                    });
                    setTimeout(() => {
                        window.location.href = "login.html";
                    }, 
 
1000);
                } else {
                    reject(res.msg);
                    $.message({
                        message: res.msg,
                        type: 'error',
                    });
                }
            },
            error: function(err) {
                reject('伺服器端響應超時,請稍後再試');
                $.message({
                    message: '伺服器端響應超時,請稍後再試',
                    type: 'error',
                });
            },
        });
    });
}

同時也保留了，每個介面的處理的能力

缺點吧，回撥地獄問題，不過引入bable，使用await， async也可以解決

其他基本沒啥大問題

2.axios，也是對原生XHR的封裝

axios使用上跟promise基本一樣，他的all，race與promise一樣，很方便；

使用then解決回撥地獄的問題，當然用await， async更佳

同理axios能幫助到我們的東西基本上面一樣多，特別是他請求攔截，響應攔截這一塊，有幫我們封裝

axios.defaults.timeout = 60000; //超時響應
// 請求攔截
axios.interceptors.request.use(config => {
        // 1. 這個位置就請求前最後的配置
        // 2. 當然你也可以在這個位置 加入你的後端需要的使用者授權資訊
        let token = localStorage.getItem('token');
        if (token) {
            config.headers.token = token;
        }
        return config;
    }, error => {
        return Promise.reject(error);
    })
    // 響應攔截
axios.interceptors.response.use(response => {
    // 請求成功
    // 1. 根據自己專案需求定製自己的攔截
    // 2. 然後返回資料
    if (response.data.code == 200) {
        return response.data;
    } else if (response.data.code == 403) {
        vue.$message.error("token失效,請去登入");
        // 重定向到登入頁
        router.push('/').catch(err => {
            console.log('all good')
        })
    } else {
        vue.$message.error(response.data.msg);
    }
}, error => {
    // 請求失敗
    if (error && error.response) {
        switch (error.response.status) {
            case 400:
                // 對400錯誤您的處理\
                break
            case 401:
                // 對 401 錯誤進行處理
                break
            default:
                // 如果以上都不是的處理
                return Promise.reject(error);
        }
    }

})

3.fetch，就是底層瀏覽器的api，使用的時候，也需要我們進行封裝

封裝的內容，都大致一樣；

優點基本也axios一樣吧；

但是他不支援超時控制，需要自己用promise的race去控制；

當接收到一個代表錯誤的 HTTP 狀態碼時，從 fetch()返回的 Promise 不會被標記為 reject， 即使該 HTTP 響應的狀態碼是 400 或 500。

相反，它會將 Promise 狀態標記為 resolve （但是會將 resolve 的返回值的 ok 屬性設定為 false ）， 僅當網路故障時或請求被阻止時，才會標記為 reject。