「每日一題」Fetch API 是什麼？能代替 AJAX 嗎？

短答案：

Fetch 是瀏覽器提供的原生 AJAX 介面。使用 window.fetch 函數可以代替以前的 $.ajax、$.get 和 $.post。

長答案：

前端發展地越來越快，我們用了好幾年的 $.ajax，居然也漸漸變得過時了。

以前我們用 jQuery.ajax 發一個請求是這樣的：

$.ajax(/).then(function(response){n console.log(response)n})n

現在我們用 fetch 發一個請求是這樣的：

fetch(/).then(function(response){n response.text().then(function(text){n console.log(text)n })n})n

是不是感覺很像，像就對了，因為 Fetch API 就是瀏覽器提供的用來代替 jQuery.ajax 的工具。

AJAX 的原理

我們知道 jQuery.ajax 是使用 XMLHttpRequest 對象來發送非同步請求的。

var xhttp = new XMLHttpRequest();n xhttp.onreadystatechange = function() {n if (this.readyState === 4 && this.status === 200) {n console.log(this.responseText);n }n };n xhttp.open("GET", "/", true);n xhttp.send();n

是不是很麻煩，是不是？

正是由於 XMLHttpRequest 使用起來相當麻煩，所以大家才喜歡使用 jQuery 提供的 $.ajax 方法。

用 fetch 代替 $.ajax

隨著 React.js、Angular.js 和 Vue.js 這些前端框架的流行，很多單頁面應用已經不再使用 jQuery 了，這意味著你要自己對 XMLHttpRequest 進行封裝，而很多人選擇封裝一個跟 jQuery.ajax 差不多的介面。

Fetch API 的出現，就是為了給類似的操作流程定一個介面規範。

換句話說，就是瀏覽器幫你把 jQuery.ajax 給實現了，以後大家都是用 fetch 來發送非同步請求就好了。

Fetch API 提供的一組對象

window.fetch 函數只是 Fetch API 提供的眾多介面中的一個，還有很多有用的對象：

• window.Headers

• window.Response

• window.Request
• ……

要學的東西又多了起來……

Fetch API 的特點

1. 基於 Promise（如果你沒有學過 Promise，強烈建議你學一學）

2. 不需要依賴第三方庫，就可以優雅地使用 AJAX

Fetch API 的問題

使用 fetch 無法取消一個請求。這是因為 Fetch API 基於 Promise，而 Promise 無法做到這一點。不過相信很快就會有對策。

兼容性

有的瀏覽器沒有 Fetch API，沒有關係，只要引入一個 polyfill 就可以了：GitHub - github/fetch: A window.fetch JavaScript polyfill.

想了解更多前端新知識，加入我的前端交流 3 群吧：222459918

推薦閱讀：