介紹
Fetch API 代表了 Web 應用程式與伺服器互動以及透過網路檢索內容的方式的重大演進。 Fetch API 作為 XMLHttpRequest (XHR) 的現代替代方案推出，為開發人員提供了更強大的功能、靈活性和簡單性。隨著與現代瀏覽器的集成，Fetch 已成為建立當代 Web 應用程式的重要工具，可以更自然、更有效率地處理非同步操作。

Fetch API 是什麼？
Fetch API 是一個 JavaScript 接口，可簡化發送 HTTP 請求和處理網路回應。與舊的 XMLHttpRequest 不同，Fetch 提供了一個與 JavaScript 的 Promise API 無縫整合的簡化介面。這種整合不僅使管理非同步操作變得更加容易，而且還提高了程式碼的可讀性和可維護性，使您的程式碼庫更乾淨、更易於管理。

Fetch 的核心是圍繞 fetch() 函數建構的，這是現代瀏覽器中可用的發送網路請求的全域函數。此函數傳回解析為 Response 物件的 Promise，讓開發人員可以輕鬆存取回應資料、標頭和狀態。這允許採用更直觀、更有組織的方法來處理網路請求的結果。 （閱讀更多）

基本文法
Fetch API 圍繞著 fetch() 函數，該函數被設計得既簡單又強大。此函數用於發起網路請求，並帶有兩個主要參數：

• URL：要取得的資源的URL字串。
• Options（可選）：包含請求的各種設定或配置的對象，例如 HTTP 方法、標頭、正文內容和模式。

簡單取得調用的結構
基本的獲取呼叫很簡單，如下所示：

fetch(url)
  .then(response => {
    // Handle the response here
  })
  .catch(error => {
    // Handle any errors here
  });

• url為要取得的資源地址。
• then() 方法處理 Fetch API 解析的 Promise，提供 Response 物件。
• catch() 方法處理請求期間可能發生的任何錯誤。

基本獲取請求範例

fetch('https://api.example.com/data')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.error('Error:', error);
  });

此範例示範如何發出簡單的 Fetch 要求，成功後將回應記錄到控制台，並妥善處理錯誤。

為什麼要用 Fetch？

使用 Fetch 的優點

Promises： Fetch 最顯著的優點之一是它對 Promises 的使用。與 XHR 基於回調的方法相比，Promise 提供了一種更清晰、更易於管理的方式來處理非同步任務。使用 Promises，您可以連結 .then() 方法來處理成功回應，並連結 .catch() 方法來管理錯誤，從而產生更具可讀性且更易於偵錯的程式碼。

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

此外，Fetch API 與 async/await 語法完美搭配，讓非同步程式碼更加簡單。

使用 async/await 的例子：

async function fetchData() {
  try {
    let response = await fetch('https://api.example.com/data');
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

更簡潔的語法： 與 XHR 相比，Fetch 提供了現代且簡潔的語法。傳遞給 fetch() 的配置物件可以輕鬆設定請求參數，例如 HTTP 方法、標頭和正文內容，從而使程式碼更清晰、更易於維護。 （閱讀全文

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

流處理： Fetch 支援回應流，這使得開發人員能夠更有效地處理大量資料。雖然 XHR 可能會難以應對大型回應，從而導致效能問題或需要額外的處理來進行分塊處理，但 Fetch 的 Response 物件提供了 .body.getReader() 等方法來讀取分塊資料。這對於串流和管理大型資料集特別有用。

fetch('https://api.example.com/large-data')
  .then(response => {
    const reader = response.body.getReader();
    let decoder = new TextDecoder();
    let result = '';

    return reader.read().then(function processText({ done, value }) {
      if (done) {
        console.log('Stream finished.');
        return result;
      }
      result  = decoder.decode(value, { stream: true });
      return reader.read().then(processText);
    });
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

閱讀全文 - 點擊此處

結論
Fetch API 徹底改變了開發人員在 Web 應用程式中發出網路請求的方式。憑藉其簡潔的語法、與 Promises 的無縫整合以及對非同步/等待和串流等現代功能的支持，Fetch 提供了一個強大而靈活的工具來處理 HTTP 請求。隨著 Web 開發的不斷發展，Fetch API 將仍然是建立高效、可維護和現代 Web 應用程式的關鍵元件。