亚洲精品www久久久久久,国产国拍亚洲精品福利,四虎www视频

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

Fetch API 基礎(chǔ)

什么是 Fetch API？

Fetch API 是瀏覽器內(nèi)置的一個強(qiáng)大工具，用于發(fā)起網(wǎng)絡(luò)請求并處理響應(yīng)。它支持多種 HTTP 方法（如 GET、POST、PUT、DELETE 等），并且基于 Promise，可以方便地進(jìn)行異步操作。

基本用法

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

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

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

輸出結(jié)果：我們可以在控制臺中看到返回的用戶數(shù)據(jù)。

獲取單個資源

接下來，我們嘗試獲取一個特定的用戶，比如用戶 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：檢查響應(yīng)狀態(tài)是否為成功（200-299）。
response.statusText：獲取響應(yīng)的狀態(tài)文本。

輸出結(jié)果：如果用戶存在，我們將看到用戶數(shù)據(jù)；如果用戶不存在，我們將看到錯誤信息。

發(fā)送數(shù)據(jù)：POST 請求

Fetch API 不僅可以用于獲取數(shù)據(jù)，還可以用于向服務(wù)器發(fā)送數(shù)據(jù)。例如，我們可以創(chuàng)建一個新用戶。

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：設(shè)置請求頭，例如 ‘Content-Type’。
body：發(fā)送的數(shù)據(jù)，必須是字符串格式，因此需要使用 JSON.stringify()。

輸出結(jié)果：如果請求成功，我們將看到新創(chuàng)建的用戶數(shù)據(jù)。

錯誤處理

Fetch API 只有在網(wǎng)絡(luò)錯誤（如無法連接到服務(wù)器）時才會失敗。即使服務(wù)器返回了錯誤狀態(tài)碼（如 404 或 500），F(xiàn)etch API 仍然會認(rèn)為操作成功。因此，我們需要手動檢查響應(yīng)狀態(tài)。

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));

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

總結(jié)

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

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