深入理解 Fetch 函數的第二個參數

更新日期： 2024 年 11 月 18 日

大多數初學者在使用 fetch 時，可能只會編寫如下的簡單代碼：

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

這樣的寫法發送的是預設的 GET 請求。

然而，當我們需要進行 POST、PUT 或 DELETE 等其他 HTTP 操作時，就需要用到 fetch 的第二個參數。

這個參數能幫助我們設定請求方法、附加標頭 (headers)、以及傳送請求主體 (body) 等細節。

Fetch 函數的第二個參數

結構介紹

fetch 的第二個參數接受一個物件，這個物件是用來設定請求的細節。

其基本結構如下：

fetch('https://example.com/api/data', {
  method: 'POST', // 使用的 HTTP 方法，如 GET、POST、PUT、DELETE 等
  headers: {
    'Content-Type': 'application/json', // 定義請求的資料類型
  },
  body: JSON.stringify({
    key: 'value', // 要傳送的資料，需與 API 格式一致
  }),
  mode: 'cors', // 跨來源請求設置，選項有 no-cors、cors、same-origin
  cache: 'no-cache', // 控制快取策略
  redirect: 'follow', // 控制重定向行為
  credentials: 'same-origin', // 是否附帶憑證（例如 Cookies）
});

常用選項詳解

以下是幾個常用選項的詳細說明：

• method 定義 HTTP 方法，例如：
  • GET：用於取得資源
  • POST：用於新增資源
  • PUT：用於更新資源
  • DELETE：用於刪除資源
• headers 指定 HTTP 請求的標頭資訊，通常會包含：
  • Content-Type：資料格式，如 application/json
  • Accept：告知伺服器我們期望的回應格式
• body 用於傳送請求主體，通常需要以 JSON.stringify() 將物件轉為 JSON 格式，
  例如：

  body: JSON.stringify({
    user: {
      email: 'example@example.com',
      password: '123456',
    },
  });

• mode 控制跨來源請求：
  • cors：允許跨來源請求
  • same-origin：僅允許同源請求
  • no-cors：僅允許特定安全的跨來源請求
• cache 設定快取策略，例如 no-cache（不使用快取）。
• credentials 是否攜帶憑證，如 Cookies：
  • include：攜帶跨來源憑證
  • same-origin：僅攜帶同源憑證
  • omit：不攜帶憑證

實際案例解析

以下是一個真實的 API 請求案例，展示如何使用 fetch 的第二個參數來滿足 API 文件的需求。

API 文件範例

curl -X 'POST' \
  'https://todoo.5xcamp.us/users' \
  -H 'accept: application/json' \
  -H 'Content-Type: application/json' \
  -d '{
    "user": {
      "email": "string",
      "nickname": "string",
      "password": "string"
    }
  }'

curl 指令的解析

什麼是 curl？

curl 是一個命令列工具，用於發送 HTTP 請求。

curl 中的重要選項

• -X
  指定 HTTP 方法，例如 -X POST 表示使用 POST 方法。
• -H
  添加 HTTP 標頭，例如 -H 'Content-Type: application/json'。
• -d
  傳送請求主體，通常是 JSON 格式的資料。

解析 API 文件

• -X 'POST'：表示請求的方法為 POST。
• Request URL：目標 URL 是 https://todoo.5xcamp.us/users。
• -H 'accept: application/json' 和 -H 'Content-Type: application/json'：這兩行代表需要在請求標頭中指定接受和傳送的資料格式都是 application/json。
• -d '{...}'：表示需要在請求主體中傳送資料，其格式為 JSON。

將文件轉為 Fetch 程式碼

對應到 fetch 的用法如下：

fetch('https://todoo.5xcamp.us/users', {
  method: 'POST', // 請求方法為 POST
  headers: {
    'Accept': 'application/json', // 接受的回應格式
    'Content-Type': 'application/json', // 傳送的資料格式
  },
  body: JSON.stringify({
    user: {
      email: 'string',
      nickname: 'string',
      password: 'string',
    },
  }),
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

總結

fetch 函數的第二個參數為我們提供了靈活的設定選項，能夠滿足各種 API 的需求，包括指定請求方法、設定標頭、傳送主體資料等。

通過實際案例，我們學習了如何正確地根據 API 文件編寫對應的 fetch 請求，並進一步了解了 curl 指令的功能。

對於新手來說，熟悉這些選項將有助於你更好地使用 fetch 函數，處理不同的 API 請求場景。