whatwg-fetch

WHATWG Fetch 是一个现代 JavaScript API，用于进行 HTTP 请求和处理响应。它是 Fetch 标准的一部分，由万维网超级工作组（WHATWG）开发，用来替代早期的 XMLHttpRequest 对象，提供更简洁和强大的接口。

Fetch API 的基本用法

Fetch API 的核心是一个简单的全局 fetch 函数，它返回一个 Promise，该 Promise 解析为代表请求结果的 Response 对象。基本的用法如下：

fetch('https://api.example.com/data')
  .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('There has been a problem with your fetch operation:', error));

在这个例子中，fetch 函数首先发起一个 HTTP GET 请求。当请求完成时，返回的 Response 对象的 ok 属性用于判断请求是否成功。通过 response.json() 方法将响应内容解析为 JSON 格式。在任何一个步骤发生错误时，可以通过 catch 方法来进行错误处理。

更高级的用法

指定请求方法和头部

Fetch API 的第二个参数是一个可选的配置对象，可以通过它设置请求方法、请求头等。以下是一个 POST 请求的示例：

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

在这个例子中，方法被设置为 POST，并且请求头中设置了 Content-Type 为 application/json 表示发送 JSON 格式数据。

处理不同类型的响应

除了 .json()，Response 对象还提供了其他方法来解析响应体：

• .text() - 将响应解析为字符串。
• .blob() - 将响应解析为二进制的大对象（Blob）。
• .arrayBuffer() - 将响应解析为 ArrayBuffer，用于处理底层二进制数据。
• .formData() - 将响应解析为 FormData 对象，适合处理 multipart/form-data 类型数据。

示例代码：

fetch('https://api.example.com/image')
  .then(response => response.blob())
  .then(imageBlob => {
    const imageURL = URL.createObjectURL(imageBlob);
    document.querySelector('img').src = imageURL;
  })
  .catch(error => console.error('Error:', error));

取消请求

Fetch 本身不支持请求取消，可以结合 AbortController 使用。AbortController 提供了一种方法来中止 fetch 请求：

const controller = new AbortController();
const signal = controller.signal;

fetch('https://api.example.com/slow-endpoint', { signal })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.error('Fetch aborted');
    } else {
      console.error('Fetch error:', error);
    }
  });

// 在某个条件下中止请求
controller.abort();

在这个例子中，通过创建 AbortController，将其 signal 属性传递给 fetch 请求，然后可以调用 controller.abort() 方法来中止该请求。

跨域请求和 CORS

Fetch 请求默认符合 CORS（Cross-Origin Resource Sharing）策略。对于跨域请求，服务器需要正确设置响应头，例如 Access-Control-Allow-Origin，以允许来自不同源的请求。

fetch('https://api.different-origin.com/data')
  .then(response => {
    if (response.ok) {
      return response.json();
    }
    throw new Error('Network response was not ok.');
  })
  .then(data => console.log(data))
  .catch(error => console.error('There has been a problem with your fetch operation:', error));

如果服务器不配置 CORS 标头，浏览器的请求将被阻止。对于复杂请求，例如使用非标准 HTTP 方法或自定义头部的请求，服务器可能需要附加的预检请求。

与 Axios 的比较

尽管 Fetch API 是现代浏览器的一个内置特性，但在复杂的应用中，一些开发者可能更倾向于使用更高级的库，如 Axios。以下是一些对比：

Fetch 的优势

• 内置于浏览器，不需要额外的库。
• 更加现代化和简洁，比传统的 XMLHttpRequest 易于使用。

Axios 的优势

• 提供了更多高级功能，如请求取消、自动 JSON 转换等。
• 支持拦截器（interceptors），可以在请求或响应被处理之前进行修改。
• 更好的错误处理机制，可以根据 HTTP 状态代码直接抛出错误。

总结

WHATWG Fetch 提供了一种现代化的方式来进行 HTTP 请求，它利用 Promise 使异步操作更加简洁和清晰。通过支持流、请求取消、跨域请求等，Fetch 几乎可以满足大多数常见的 web 开发需求。然而，在某些复杂场景下，可能仍然需要借助像 Axios 这样的第三方库。无论选择何种方式，开发者都应针对应用场景选择合适的工具，以提高开发效率和代码可读性。