国产亚洲精品日韩已满十八,男女羞羞视频网站18,日韩午夜小视频

為了方便演示，我在右側打開了一個簡單的 JavaScript 頁面，并且打開了控制臺。我們在左側輸入的代碼，其運行結果會直接顯示在右側。

Fetch API 基礎

什么是 Fetch API？

Fetch API 是瀏覽器內置的一個強大工具，用于發起網絡請求并處理響應。它支持多種 HTTP 方法（如 GET、POST、PUT、DELETE 等），并且基于 Promise，可以方便地進行異步操作。

基本用法

我們先從一個簡單的 GET 請求開始。我們將調用一個假的 API，它會返回一些模擬數據。例如，我們可以獲取 API 中的所有用戶。

fetch('https://fakeapi.com/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

fetch()：接受一個 URL 作為參數，返回一個 Promise。
response.json()：將響應體轉換為 JSON 格式，也返回一個 Promise。
.then()：用于處理 Promise 的成功結果。
.catch()：用于捕獲 Promise 的錯誤。

輸出結果：我們可以在控制臺中看到返回的用戶數據。

獲取單個資源

接下來，我們嘗試獲取一個特定的用戶，比如用戶 ID 為 23。

fetch('https://fakeapi.com/users/23')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

response.ok：檢查響應狀態是否為成功（200-299）。
response.statusText：獲取響應的狀態文本。

輸出結果：如果用戶存在，我們將看到用戶數據；如果用戶不存在，我們將看到錯誤信息。

發送數據：POST 請求

Fetch API 不僅可以用于獲取數據，還可以用于向服務器發送數據。例如，我們可以創建一個新用戶。

fetch('https://fakeapi.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'User 1' })
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

method：指定請求方法（如 ‘POST’）。
headers：設置請求頭，例如 ‘Content-Type’。
body：發送的數據，必須是字符串格式，因此需要使用 JSON.stringify()。

輸出結果：如果請求成功，我們將看到新創建的用戶數據。

錯誤處理

Fetch API 只有在網絡錯誤（如無法連接到服務器）時才會失敗。即使服務器返回了錯誤狀態碼（如 404 或 500），Fetch API 仍然會認為操作成功。因此，我們需要手動檢查響應狀態。

fetch('https://fakeapi.com/users/23')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

輸出結果：如果用戶不存在，我們將看到錯誤信息。

總結

Fetch API 是一個非常強大的工具，可以幫助你輕松地與網絡資源進行交互。它基于 Promise，支持異步操作，可以處理各種 HTTP 請求方法。在使用 Fetch API 時，需要注意以下幾點：

Promise 基礎：Fetch API 返回的是一個 Promise，因此你需要使用 .then() 或 async/await 來處理異步操作。
響應處理：你需要調用 .json() 方法將響應轉換為 JSON 格式。
錯誤處理：你需要檢查響應對象的 ok 屬性來確定請求是否成功。
發送數據：在發送數據時，需要將數據轉換為 JSON 格式，并設置正確的 Content-Type 頭部。"