fetch和ajax、axios對比

axios和ajax是對XMLHttpRequest的封裝，而fetch是一種新的獲取資源的介面方式，並不是對XMLHttpRequest的封裝。
它們最大的不同點在於Fetch是瀏覽器原生支援，而Axios需要引入Axios庫。ajax需要引入Jquery

用法比較

• axios

  axios({
    url: "http://baidu.com/",
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json;charset=UTF-8",
    },
    timeout: 4000,
    data: {
      a: 10,
      b: 20,
    },
  }).then((response) => {
    console.log(response);
  }).catch((error) => {
    console.log("請求異常");
  });
 

• fetch

  fetch("http://baidu.com/", {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json;charset=UTF-8",
    },
    body: JSON.stringify({
      a: 10,
      b: 20,
    })).then((response) => {
      console.log(response);
    }).catch((error) => {
      console.log("請求異常");
    });
 

• ajax

  $.ajax({
    type: 'POST',
    url: "http://baidu.com/",
    data: {
      a: 10,
      b: 20,
    },
    success: function (response) {
      console.log(response);
    },
    error: function (error) {
      console.log("請求異常");
    }
  });

由上可以看出：最大的不同之處在於傳遞資料的方式不同，axios是放到data屬性裡，以物件的方式進行傳遞，而fetch

返回資料處理

axios會自動對資料進行轉化，而fetch則不同，它需要使用者進行手動轉化。

  // axios
  axios.get("http://baidu.com/").then((response) => {
    console.log(response.data);
  });

  // fetch
  fetch("http://baidu.com/").then((response) =>{
    // 提供了多種轉化方法
    /*
    * arrayBuffer()
      blob()
      json()
      text()
      formData()
    */
    response.json() // 需要對響應資料進行轉換
  }).then((data) => {
    console.log(data);
  })

攔截器

攔截器是一個非常重要的功能，請求攔截，響應攔截。 axios 提供了成熟的攔截器。我們可以直接方便使用。

• axios

  axios.interceptors.request.use((config) => {
    // 在請求之前對請求引數進行處理
    config.headers.Authorization = getToken() // 新增token
    return config;
  });

  axios.interceptors.response.use((response) => {
    // 統一異常處理
  })

而 fetch 沒有這方面的技術支援。需要我們自己重寫全域性fetch。

• fetch

  fetch = ((originalFetch) => {
    return (...arguments) => {
      const result = originalFetch.apply(this, arguments);
      return result.then(console.log("請求已傳送"));
    };
  })(fetch);

在使用 jQuery 的專案中，如果要對所有的請求統一設定一些引數的話，可以設定攔截器 $.ajaxSetup，
$.ajaxSetup的引數和 $.ajax 的引數一樣

  $.ajaxSetup({
    headers: {
      "token": getToken()
    }
});

由上可以看出 axios 還是更加完整好用。

併發

axios提供了併發支援。fetch和ajax沒有,需要自己封裝。

  axios.all([
    axios.get("https://test1.com"),
    axios.get("https://test2.com"),
  ]).then(
    axios.spread((res1, res2) => {
      // 分別處理
    })
  );

相容性&瀏覽器原生支援

• axios可以相容IE瀏覽器，而fetch在IE瀏覽器和一些老版本瀏覽器上沒有受到支援，但是有一個庫可以讓老版本瀏覽器支援Fetch即它就是whatwg-fetch，它可以讓你在老版本的瀏覽器中也可以使用fetch，並且現在很多網站的開發都為了減少成本而選擇不再相容IE瀏覽器。
• fetch受到瀏覽器原生支援。無需引入依賴包。這可能是fetch唯一的優勢。

總結

fetch是一個低層次的API，你可以把它考慮成原生的XHR，所以使用起來並不是那麼舒服，需要進行封裝。但是可以通過封裝完成所有axios所有的功能。
ajax的使用需要引入龐大的Jquery。是阻攔它流行的最大原因。並且本身是針對MVC的程式設計,不符合現在前端MVVM的浪潮。勢必會慢慢成為歷史。
axios還是開箱即用。而且文件齊全。任然是現在最流行的網路請求技術。