強勢的fetch

傳統 Ajax 指的是 XMLHttpRequest 即 XHR

Fetch API 提供了一個獲取資源的接口（包括跨域）。任何使用過 XMLHttpRequest 的人都能輕鬆上手，但新的API提供了更強大和靈活的功能集。

Fetch原生支持率：

 

fetch兼容性：

如下內容轉載：http://caibaojian.com/fetch-ajax.html

Why Fetch

XMLHttpRequest 是一個設計粗糙的 API，不符合關注分離（Separation of Concerns）的原則，配置和調用方式很是混亂，並且基於事件的異步模型寫起來也沒有現代的 Promise，generator/yield，async/await 友好。·

Fetch 的出現就是爲了解決 XHR 的問題，拿例子說明：

使用 XHR 發送一個 JSON 請求通常是這樣：

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("Oops, error");
};

xhr.send();

使用 Fetch 後，頓時看起來好一點

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});

使用 ES6 的 箭頭函數 後：

fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

 

總結一下，Fetch 優勢主要有：

1. 語法簡潔，更加語義化
2. 基於標準 Promise 實現，支持 async/await
3. 同構方便，使用 isomorphic-fetch