69、深入理解Fetch API：网络请求与资源处理

深入理解Fetch API：网络请求与资源处理

1. 跨域请求

在Web开发中，跨域请求是一个常见的需求。当我们请求来自不同源的资源时，浏览器需要响应头中包含CORS（跨域资源共享）头才能接受该响应。如果没有这些头，跨域请求将会失败并抛出错误。

fetch('//cross-origin.com');
// TypeError: Failed to fetch
// No 'Access-Control-Allow-Origin' header is present on the requested resource.

如果代码不需要访问响应内容，可以发送一个 no-cors 请求。这种情况下，响应的 type 属性将为 opaque ，这意味着不能检查响应内容。此策略对于发送ping请求或仅缓存响应以供后续使用很有用。

fetch('//cross-origin.com', { method: 'no-cors' })
  .then((response) => console.log(response.type));
// opaque

2. 中止请求

Fetch API 支持通过 AbortController/AbortSignal 对来中止请求。调用 AbortController.abort()