【转】[JavaScript] fetch 用法

转自：kimi.ai

fetch 是 JavaScript 中用于发起网络请求的现代 API，它提供了一种简洁且强大的方式来替代传统的 XMLHttpRequest。fetch 基于 Promise，支持异步操作，能够方便地处理 HTTP 请求和响应。

基本语法

JavaScript复制

fetch(url, options)
  .then(response => response.json()) // 或 response.text()、response.blob() 等
  .then(data => console.log(data))
  .catch(error => console.error("Error:", error));

参数

1. url：请求的资源地址，必须是字符串。
2. options（可选）：一个对象，用于配置请求的细节，例如请求方法、头信息、请求体等。

常用选项

• method：请求方法（如 GET、POST、PUT、DELETE 等，默认为 GET）。
• headers：请求头，一个对象或 Headers 实例。
• body：请求体，用于 POST 或 PUT 请求，可以是 FormData、URLSearchParams、Blob、BufferSource 或字符串。
• mode：请求模式（如 cors、no-cors、same-origin）。
• credentials：是否携带凭据（如 include、omit、same-origin）。

响应处理

fetch 返回一个 Promise，解析为 Response 对象。Response 对象提供了多种方法来处理响应数据：

• response.json()：将响应体解析为 JSON。
• response.text()：将响应体解析为文本。
• response.blob()：将响应体解析为 Blob。
• response.arrayBuffer()：将响应体解析为 ArrayBuffer。

---

示例

1. 发起 GET 请求

JavaScript复制

fetch("https://api.example.com/data")
  .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));

2. 发起 POST 请求

JavaScript复制

const data = { name: "Alice", age: 25 };

fetch("https://api.example.com/submit", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(data)
})
  .then(response => response.json())
  .then(data => console.log("Success:", data))
  .catch(error => console.error("Error:", error));

3. 处理不同类型的响应

JavaScript复制

fetch("https://example.com/image.jpg")
  .then(response => response.blob())
  .then(blob => {
    const img = document.createElement("img");
    img.src = URL.createObjectURL(blob);
    document.body.appendChild(img);
  })
  .catch(error => console.error("Error:", error));

4. 使用 async/await 简化代码

JavaScript复制

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("Error:", error);
  }
}

fetchData();

---

注意事项

1. 错误处理：
   • fetch 只会在网络故障或请求无法发送时触发 catch 块。如果服务器返回 4xx 或 5xx 状态码，fetch 仍然会将响应解析为 Promise，因此需要手动检查 response.ok 或 response.status。
   JavaScript复制

   if (!response.ok) {
     throw new Error(`HTTP error! Status: ${response.status}`);
   }

2. 跨域问题：
   • 如果请求的资源位于不同的域，需要服务器支持 CORS（跨域资源共享）。如果服务器未启用 CORS，浏览器会阻止请求。
3. 取消请求：
   • fetch 不支持直接取消请求。如果需要取消请求，可以使用 AbortController。
   JavaScript复制

   const controller = new AbortController();
   const signal = controller.signal;
   
   fetch("https://api.example.com/data", { signal })
     .then(response => response.json())
     .then(data => console.log(data))
     .catch(error => console.error("Error:", error));
   
   // 取消请求
   controller.abort();

4. 兼容性：
   • fetch 在现代浏览器中广泛支持，但在一些旧版本浏览器（如 IE）中可能不可用。如果需要支持旧浏览器，可以使用 Fetch Polyfill。

总结

fetch 是一个强大且简洁的网络请求 API，适用于现代 JavaScript 开发。它基于 Promise，支持异步操作，能够方便地处理各种类型的请求和响应。通过合理使用 fetch，你可以构建高效且可维护的网络交互代码。