Fetch API 的作用是什么？

推荐答案

Fetch API 是一种现代的网络请求接口，用于在浏览器中发起 HTTP 请求。它提供了一个简单、强大且灵活的方式来获取资源（如 JSON、HTML、图片等），并且支持 Promise，使得异步操作更加直观和易于管理。

本题详细解读

1. Fetch API 的基本用法

Fetch API 的核心是 fetch() 函数，它接受一个 URL 作为参数，并返回一个 Promise 对象。这个 Promise 在请求成功后会解析为一个 Response 对象，开发者可以通过这个对象来获取响应的数据。

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

2. Fetch API 的优势

• 基于 Promise：Fetch API 使用 Promise 来处理异步操作，避免了回调地狱（Callback Hell），代码更加简洁和可读。
• 灵活性：Fetch API 提供了丰富的配置选项，允许开发者自定义请求头、请求方法（GET、POST 等）、请求体等。
• 现代浏览器支持：Fetch API 是现代浏览器的标准 API，不需要额外的库或插件。

3. Fetch API 的常见配置

Fetch API 的第二个参数是一个配置对象，可以用来设置请求的各种选项，例如：

// www.javascriptcn.com code example
fetch('https://api.example.com/data', {
  method: 'POST', // 请求方法
  headers: {
    'Content-Type': 'application/json' // 请求头
  },
  body: JSON.stringify({ key: 'value' }) // 请求体
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

4. Fetch API 的错误处理

Fetch API 不会因为 HTTP 状态码（如 404 或 500）而自动抛出错误，只有在网络请求失败时才会触发 catch。因此，开发者需要手动检查 response.ok 或 response.status 来处理错误。

// www.javascriptcn.com code example
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));

5. Fetch API 与 XMLHttpRequest 的对比

Fetch API 是 XMLHttpRequest 的现代替代品，具有更简洁的 API 设计和更好的功能支持。相比于 XMLHttpRequest，Fetch API 更加符合现代 JavaScript 的编程风格，尤其是在处理异步操作时。