ajax、axios、fetch之間的詳細區別以及優缺點

將jQuery的ajax、axios和fetch作個簡單的比較，所謂仁者見仁智者見智，最終使用哪一個仍是自行斟酌

1.jQuery ajax

    $.ajax({
       type: 'POST',
       url: url,
       data: data,
       dataType: dataType,
       success: function () {},
       error: function () {}
    });

優缺點：

    自己是針對MVC的編程,不符合如今前端MVVM的浪潮
    基於原生的XHR開發，XHR自己的架構不清晰，已經有了fetch的替代方案
    JQuery整個項目太大，單純使用ajax卻要引入整個JQuery很是的不合理（採起個性化打包的方案又不能享受CDN服務）

2.axios

    axios({
        method: 'post',
        url: '/user/12345',
        data: {
            firstName: 'Fred',
            lastName: 'Flintstone'
        }
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

優缺點：

    從 node.js 建立 http 請求
    支持 Promise API
    客戶端支持防止CSRF
    提供了一些併發請求的接口（重要，方便了不少的操做）

3.fetch

    try {
      let response = await fetch(url);
      let data = response.json();
      console.log(data);
    } catch(e) {
      console.log("Oops, error", e);
    }

優缺點：

    符合關注分離，沒有將輸入、輸出和用事件來跟蹤的狀態混雜在一個對象裏
    更好更方便的寫法
    更加底層，提供的API豐富（request, response）
    脫離了XHR，是ES規範裏新的實現方式
    1）fetchtch只對網絡請求報錯，對400，500都當作成功的請求，須要封裝去處理
    2）fetch默認不會帶cookie，須要添加配置項
    3）fetch不支持abort，不支持超時控制，使用setTimeout及Promise.reject的實現的超時控制並不能阻止請求過程繼續在後臺運行，形成了量的浪費
    4）fetch沒有辦法原生監測請求的進度，而XHR能夠

爲何要用axios?

axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，它自己具備如下特徵：

    從瀏覽器中建立 XMLHttpRequest     從 node.js 發出 http 請求     支持 Promise API     攔截請求和響應     轉換請求和響應數據     取消請求     自動轉換JSON數據     客戶端支持防止CSRF/XSRF