了解 Fetch API：Web 開發中網路請求的未來

簡介
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 應用程式的關鍵元件。

以上是了解 Fetch API：Web 開發中網路請求的未來的詳細內容。更多資訊請關注PHP中文網其他相關文章！