初學者指南：了解 JavaScript 的 fetch 函數

更新日期： 2024 年 9 月 14 日

在現代網頁開發中，從伺服器獲取資料是一個非常常見的需求。

過去，我們通常使用 XMLHttpRequest 來進行這些操作。

然而，隨著 Fetch API 的出現，我們有了一種更簡單、更靈活的方式來處理 HTTP 請求。

這篇文章將帶你了解 fetch 函數的概念，並展示如何在你的代碼中使用它。

什麼是 Fetch？

fetch 是一個基於 Promise 的 API，用於發送 HTTP 請求。

與傳統的 XMLHttpRequest 相比，Fetch API 更加簡潔，並且更容易理解和使用。

fetch 函數返回一個 Promise 物件，這是處理非同步操作的核心工具。

Promise 是一種用來處理未來某個時間點完成的操作（如 HTTP 請求）的 JavaScript 物件。

它允許我們使用 .then 和 .catch 方法來處理異步操作的結果，使代碼更加清晰和易於管理。

Fetch 函數的基本架構

基本語法

fetch 函數的基本語法如下：

fetch(url, options)

• url：一個表示資源位置的字符串，通常是 API 的端點。
• options（可選）：一個配置物件，用來設定 HTTP 請求的各種參數。

Options 物件的詳細結構

options 物件允許我們自定義請求的各種參數。以下為常用的 Options 參數

使用 fetch 發送 GET 請求

這裡是一個基本的示例：

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json()) // 將響應轉換為 JSON
  .then(data => {
    console.log(data); // 打印獲取到的資料
  })
  .catch(error => {
    console.error('發生錯誤:', error); // 處理錯誤
  });

步驟 1：發送請求

fetch(‘https://jsonplaceholder.typicode.com/posts/1’) 發送一個 GET 請求到指定的 URL。

這個方法返回一個 Promise，表示請求的非同步操作。

這裡，fetch 的返回值是一個 Promise 對象。

步驟 2：處理響應

fetch 返回的 Promise 會在請求完成後解析（resolve），並傳遞一個 Response 物件，給第一個 .then 方法中的回調函數。

.then(response => response.json())

這行代碼中的 response 是 fetch 請求成功後返回的 Response 物件。

response.json() 會讀取這個 Response 的內容，並返回一個解析後的 JSON 對象的 Promise。

步驟 3：處理 JSON 數據

第二個 .then 方法中的回調函數接收解析後的 JSON 數據。

.then(data => {
     console.log(data); // 打印獲取到的資料
   })

步驟 4：錯誤處理

如果在請求過程中發生錯誤，我們可以使用 .catch 方法來處理。

.catch(error => {
     console.error('發生錯誤:', error); // 處理錯誤
   });

使用 Fetch 發送 POST 請求

除了 GET 請求，我們還可以使用 fetch 發送 POST 請求。

這裡是一個範例，說明如何發送帶有數據的 POST 請求：

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST', // 指定請求方法為 POST
  headers: {
    'Content-Type': 'application/json' // 指定請求頭為 JSON
  },
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  }) // 將請求主體轉換為 JSON 字符串
})
  .then(response => response.json()) // 將響應轉換為 JSON
  .then(data => {
    console.log(data); // 打印獲取到的資料
  })
  .catch(error => {
    console.error('發生錯誤:', error); // 處理錯誤
  });

步驟 1：指定請求方法

在 fetch 方法的第二個參數中，我們指定 method: ‘POST’ 來發送 POST 請求。

步驟 2：設置請求頭

使用 headers 屬性設置請求頭，這裡我們指定了 Content-Type 為 application/json，告訴伺服器發送的數據格式是 JSON。

步驟 3：發送數據

使用 body 屬性發送請求數據。我們使用 JSON.stringify 將 JavaScript 對象轉換為 JSON 字符串。

const user = {
  name: "John",
  age: 30,
  email: "john@example.com"
};

const jsonString = JSON.stringify(user);
console.log(jsonString); 

// 打印 {"name":"John","age":30,"email":"john@example.com"}

步驟 4：處理響應與錯誤

與之前的示例類似，我們使用 .then 來處理成功的響應，並使用 .catch 來處理可能出現的錯誤。

使用 Fetch 發送 POST 請求（await 版本）

你也可以將代碼轉換成 async / await 版本，代碼如下：

async function postData() {
  try {
    // 發送 POST 請求
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST', // 指定請求方法為 POST
      headers: {
        'Content-Type': 'application/json' // 指定請求頭為 JSON
      },
      body: JSON.stringify({
        title: 'foo',
        body: 'bar',
        userId: 1
      }) // 將請求主體轉換為 JSON 字符串
    });

    // 確認響應的狀態是否為 2xx
    if (!response.ok) {
      throw new Error('網絡回應非正常狀態');
    }

    // 將響應轉換為 JSON
    const data = await response.json();
    console.log(data); // 打印獲取到的資料
  } catch (error) {
    console.error('發生錯誤:', error); // 處理錯誤
  }
}

// 調用 postData 函數
postData();

步驟 1：定義異步函數

使用 async function 定義一個名為 postData 的異步函數。

步驟 2：發送請求

使用 await fetch 發送一個 POST 請求，並等待請求完成。這裡的 fetch 請求配置與之前的代碼相同。

步驟 3：檢查響應狀態

在獲取響應後，使用 if (!response.ok) 檢查響應狀態。如果響應不是 2xx，則拋出一個錯誤。

步驟 4：處理響應數據

使用 await response.json() 將響應轉換為 JSON 格式，並打印數據。

步驟 5：錯誤處理

使用 try/catch 塊來捕捉和處理請求過程中可能發生的錯誤。

步驟 5：錯誤處理

最後，調用 postData 函數以執行上述操作。

總結

fetch 函數提供了一個靈活且強大的方式來發送 HTTP 請求。

通過設置 options 對象中的各種參數，你可以自定義請求的各個方面。