• Ajax

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

  • 核心使用XMLHttpRequest對象。
  • 多個請求之間如果有先后關(guān)系的話，就會出現(xiàn)回調(diào)地獄。
  • 是對原生XHR的封裝，除此以外還增添了對JSONP的支持
  • 缺點
    • 本身是針對MVC的編程,不符合現(xiàn)在前端MVVM
    • 基于原生的XHR開發(fā)，XHR本身的架構(gòu)不清晰。
    • JQuery整個項目太大，單純使用ajax卻要引入整個JQuery非常的不合理
    • 不符合關(guān)注分離（Separation of Concerns）的原則

    • 配置和調(diào)用方式非常混亂，而且基于事件的異步模型不友好。

      
      
      image

• axios

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

  • axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，本質(zhì)上也是對原生XHR的封裝，只不過它是Promise的實現(xiàn)版本，符合最新的ES規(guī)范，它本身具有以下特征：
  • 從瀏覽器中創(chuàng)建 XMLHttpRequest
  • 支持 Promise API
  • 客戶端支持防止CSRF
  • 提供了一些并發(fā)請求的接口（重要，方便了很多的操作）
  • 從 node.js 創(chuàng)建 http 請求
  • 攔截請求和響應(yīng)
  • 轉(zhuǎn)換請求和響應(yīng)數(shù)據(jù)
  • 取消請求
  • 自動轉(zhuǎn)換JSON數(shù)據(jù)
  • 防止CSRF:就是讓每個請求都帶一個從cookie中拿到的key, 根據(jù)瀏覽器同源策略，假冒的網(wǎng)站是拿不到你cookie中得key的，這樣，后臺就可以輕松辨別出這個請求是否是用戶在假冒網(wǎng)站上的誤導(dǎo)輸入，從而采取正確的策略

• fetch

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

  • Fetch是基于promise設(shè)計的。Fetch的代碼結(jié)構(gòu)比起ajax簡單多了，參數(shù)有點像jQuery ajax。但是，一定記住fetch不是ajax的進一步封裝，而是原生js，沒有使用XMLHttpRequest對象。

• 符合關(guān)注分離，沒有將輸入、輸出和用事件來跟蹤的狀態(tài)混雜在一個對象里

• 更好更方便的寫法

• 語法簡潔，更加語義化

• 基于標(biāo)準(zhǔn) Promise 實現(xiàn)，支持 async/await

• 同構(gòu)方便，使用 isomorphic-fetch

• 更加底層，提供的API豐富（request, response）

• 脫離了XHR，是ES規(guī)范里新的實現(xiàn)方式

1）fetch只對網(wǎng)絡(luò)請求報錯，對400，500都當(dāng)做成功的請求，服務(wù)器返回 400，500 錯誤碼時并不會 reject，只有網(wǎng)絡(luò)錯誤這些導(dǎo)致請求不能完成時，fetch 才會被 reject。
2）fetch默認不會帶cookie，需要添加配置項： fetch(url, {credentials: 'include'})
3）fetch不支持abort，不支持超時控制，使用setTimeout及Promise.reject的實現(xiàn)的超時控制并不能阻止請求過程繼續(xù)在后臺運行，造成了流量的浪費
4）fetch沒有辦法原生監(jiān)測請求的進度，而XHR可以