在Web開發中與伺服器進行數據交換是不可或缺的一部分。
Fetch API就是專門用於簡化和改進網絡請求方面的強大工具，來看看吧!

什麼是Fetch API？

Fetch API是JS的內建API用於進行網絡請求和處理伺服器的回應。
提供更簡單、更強大的方式來執行這些操作並使用Promise對象使異步操作易於管理。

設計優勢：

• 簡潔的語法： 語法簡單，發送和處理請求容易。

• Promise支持： 使用Promise對象處理異步操作，能更好控制流程。

• 內建JSON處理： 處理伺服器回應時可以輕鬆地將回應轉換為JSON格式。

• 支援CORS（跨來源資源共用）： 可以處理跨來源請求使跨網域數據交換更容易。

基本用法

向伺服器發送GET請求：

範例:

使用fetch函數傳遞要訪問的URL，使用Promise鏈來處理伺服器的回應。
首先檢查回應的狀態（response.ok）

• 如果請求失敗，不是回傳200 OK則拋出一個錯誤。
• 如果請求成功則使用response.json()將回應轉換為JSON格式並在下一個.then中處理後續。

// 使用fetch函數發送GET請求
fetch("https://api.example.com/data")
  .then(function (response) {
    if (!response.ok) {
      throw new Error("請求失敗：" + response.status);
    }
    // 將回應轉換為JSON格式
    return response.json();
  })
  .then(function (data) {
    // 處理伺服器的回應數據
    console.log(data);
  })
  .catch(function (error) {
    // 處理錯誤
    console.error(error);
  });

向伺服器發送POST請求：

使用fetch函數傳遞要訪問的URL並指定POST請求的相關配置，使用Promise鏈來處理伺服器的回應。
首先檢查回應的狀態（response.ok）

• 如果請求失敗，不是回傳200 OK，則拋出一個錯誤。
• 如果請求成功，則使用response.json()將回應轉換為JSON格式並在下一個.then區塊中處理後續操作。

fetch("https://api.example.com/post-data", {
  method: "POST",
  body: JSON.stringify({ key: "value" }),
  headers: {
    "Content-Type": "application/json",
  },
})
  .then(function (response) {
    // 處理回應
  })
  .catch(function (error) {
    // 處理錯誤
  });

處理跨來源請求(CORS)

使用fetch函數傳遞要訪問的URL，使用Promise鏈來處理伺服器的回應。
在設定中，設定mode屬性為 "cors" ，這表示啟用了CORS模式允許跨不同來源的請求。
在.then中處理伺服器的回應也可以在.catch中處理任何錯誤。

fetch("https://api.example.com/data", {
  mode: "cors", // 啟用CORS
})
  .then(function (response) {
    // 處理回應
  })
  .catch(function (error) {
    // 處理錯誤
  });

今天先介紹到這邊，感謝觀看!