fetch 語法範例

以下是一個基本的 fetch 語法範例，以及一些重點說明：

fetch('https://api.example.com/data') // 發送請求的 URL
  .then(response => {
    // 檢查 HTTP 狀態碼是否為成功 (200~299)
    if (!response.ok) {
      throw new Error('網路回應錯誤');
    }
    // 將 response 轉換成 JSON 格式
    return response.json();
  })
  .then(data => {
    // 成功取得資料後的處理
    console.log(data);
  })
  .catch(error => {
    // 捕捉網路錯誤或其他異常狀況
    console.error('Fetch 發生錯誤:', error);
  });

重點說明

全域物件：
fetch 是瀏覽器中的全域 window 物件，無需額外引入就可以直接使用。
Promise 回傳：
fetch 發出請求後會回傳一個 Promise，當請求成功時狀態變為 fulfilled 並帶有一個 Response 物件。
Response 物件：
Response 物件內包含了各種方法，如 json()、text()、blob() 等，用來將回傳的資料解析成所需的格式。
錯誤處理：
需要注意的是，即使 HTTP 狀態碼為 404 或 500，Promise 依然會進入 fulfilled 狀態，所以我們必須手動檢查 response.ok 來判斷請求是否成功。

使用 async/await 的寫法：
除了 .then() 的寫法，還可以使用 async/await 來撰寫非同步程式碼，例如：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('HTTP 錯誤，狀態碼: ' + response.status);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch 發生錯誤:', error);
  }
}

fetchData();

這樣的基本語法可以幫助你發送 HTTP 請求，並依照需求取得 JSON、文字或其他格式的資料。

ChatGPT-Assist-AI-Solving

搜尋此網誌

fetch 語法範例

重點說明