深入理解FetchAPI

一、fetch的基本概念

當我們需要從遠程URL獲取資源時，可以使用XMLHttpRequest對象從服務器或某個URL中獲取信息，然而，由於其API不是原生的，而且使用不太方便，因此，現在大多數開發人員使用fetch API進行網絡請求。

Fetch API是一個現代的網絡請求API，旨在替代XMLHttpRequest和jQuery Ajax等老式方式。 它提供了許多豐富的功能，如Promise，異步/等待，請求/響應模式等，使得開發人員能夠更快地獲取和管理網絡資源。

二、fetch的常用用法

1. fetch的基本使用方法

fetch(url).then(response => response.json()).then(data => console.log(data)).catch(error => console.log(error));

fetch返回的是一個Promise對象，我們可以通過then方法和catch方法來對fetch返回的結果進行處理。

2. fetch的請求選項

fetch(url, {method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({username: 'example'})})

使用fetch時可以提供一個可選的options參數，options中可以設置請求的方法、請求頭、請求主體等選項。

3. fetch的請求模式

fetch(url, {mode: 'no-cors'})

Fetch API可以使用多種請求模式，例如cors, no-cors, same-origin, navigate。 ‘no-cors’意味着請求永遠不會設置CORS請求頭，因此不會引發CORS預檢。這種模式在你想在當前頁面內嵌加載一個像Google Fonts之類的外部資源時非常有用。

三、fetch的響應處理

1. fetch的響應類型

fetch(url).then(response => response.text())

Response對象中的很多方法都是根據響應的類型來處理的，例如，我們可以使用text()、json()、blob()等方法來將返回的響應處理成不同類型的數據。

2. 自定義fetch響應

class CustomResponse extends Response {
constructor(data) {
super(data);
this.data = data;
}
}
fetch(url).then(response => {
let customResponse = new CustomResponse(response);
return customResponse.json();
})

我們可以自定義Response的子類，以實現自定義的響應數據類型和其他數據操作

四、fetch的兼容性處理

在舊版本的瀏覽器中（如IE，Safari），fetch API不被支持。 為了解決這個問題,我們可以使用對應回調的傳統XMLHttpRequest API對象，或使用Polyfill庫 (如whatwg-fetch)來支持舊版瀏覽器上的fetch API方法。

五、總結

通過本文，我們可以深入的理解fetch API的使用方法、請求選項、請求模式、響應處理以及兼容性處理。fetch API提供了豐富的選項和方法，可以更好地滿足我們不同的請求需求。但也需要注意其兼容性問題，需要在使用時進行相應的瀏覽器兼容性處理。