浅谈Fetch API – 小飞侠

什么是Fetch API

Fetch API 是一种现代的 JavaScript API，用于进行网络请求和处理响应数据。它提供了一种更简单和更灵活的方式来执行网络请求，取代了传统的 XMLHttpRequest（XHR）。

Fetch API 具有以下特点：

Promise 风格的 API：

Fetch API 使用 Promise 对象进行异步操作的处理。这使得处理异步操作变得更加直观和易于管理。
更清晰的语法：

Fetch API 的语法更加清晰和简洁，可以通过链式调用来定义请求的各个参数。
支持请求和响应对象：

Fetch API 允许您创建请求对象并设置请求头、请求方法、请求体等参数。同时，它也提供了处理响应的功能，可以获取响应头、响应状态等信息。
内置 JSON 解析：

在 Fetch API 中，处理 JSON 数据更加方便。默认情况下，响应数据会被自动解析为 JSON 对象。
跨域请求支持：

与 XMLHttpRequest 一样，Fetch API 也可以用于进行跨域请求。但是要注意，默认情况下，浏览器不会发送跨域请求的身份验证凭据（如 Cookie）。

以下是使用 Fetch API 进行 GET 请求的示例：

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // 解析为 JSON 对象
  })
  .then(data => {
    console.log(data); // 处理响应数据
  })
  .catch(error => {
    console.error('Fetch Error:', error);
  });

以上代码中，
fetch
函数发送了一个 GET 请求到指定的 URL，然后使用 Promise 的链式调用处理响应数据。在
then
方法中，您可以根据需要进行响应数据的解析和处理，同时使用
catch
方法来捕获请求和解析过程中的错误。

需要注意的是，Fetch API 在某些方面与传统的 XMLHttpRequest 有所不同，例如错误处理和请求的默认设置。在实际使用中，您可以根据具体需求选择适合的网络请求工具。

Fetch API 的主要 API

Fetch API 提供了一组用于进行网络请求和处理响应的方法和属性。以下是一些 Fetch API 的主要 API：

fetch() 方法：
- 用于发送网络请求并返回一个 Promise 对象，该 Promise 在请求完成后会解析为 Response 对象。

fetch(url, options);

Response 对象：
- 表示一个 HTTP 响应，它包含响应头、响应状态、响应数据等信息。
Request 对象：
- 表示一个 HTTP 请求，可以用于自定义请求头、请求方法等。
Headers 对象：
- 用于操作和管理请求和响应的头部信息。
RequestInit 参数对象：
- 在
  fetch()
  方法中，可以通过这个对象设置请求的各种选项，如请求方法、请求头、请求体等。
Body 对象：
- 用于操作请求和响应的数据体（请求体和响应体），可以通过
  .json()
  、
  .text()
  等方法解析响应数据。
Response 方法和属性：
- .json()
  ：返回一个 Promise，解析响应数据为 JSON 对象。
- .text()
  ：返回一个 Promise，解析响应数据为文本字符串。
- .blob()
  ：返回一个 Promise，解析响应数据为二进制 Blob 对象。
- .arrayBuffer()
  ：返回一个 Promise，解析响应数据为 ArrayBuffer 对象。
- .ok
  ：一个只读属性，表示响应是否成功。
- .status
  ：一个只读属性，表示响应的状态码。
CORS 相关选项：
- mode
  ：设置请求模式，如
  "cors"
  （跨域请求）、
  "same-origin"
  （同源请求）、
  "no-cors"
  （不允许跨域请求）。
- credentials
  ：设置请求是否携带跨域请求的凭据，如
  "include"
  、
  "same-origin"
  、
  "omit"
  。
AbortController 和 AbortSignal：
- 用于实现请求的取消功能，通过
  AbortController
  可以创建一个控制器，然后将其与请求关联，通过
  AbortSignal
  可以监听请求的取消事件。

这些是 Fetch API 中的一些核心方法、对象和属性。

与axios区别

fetch
和
axios
都是 JavaScript 中用于进行网络请求的工具，但它们有一些不同之处。以下是它们之间的一些主要区别：

API 风格：
- fetch
  是浏览器内置的原生 API，用于进行网络请求。它返回 Promise 对象，采用 Promise 风格的异步编程。
- axios
  是一个基于 Promise 的第三方库，提供了更高级的 API，可以在浏览器和 Node.js 环境中使用。
全局性：
- fetch
  是浏览器的全局对象，可直接在浏览器环境中使用。
- axios
  需要通过导入库后使用，可以在浏览器和 Node.js 环境中使用。
语法和配置：
- fetch
  使用基于方法的链式调用，如
  .then()
  ，并提供了一组参数来配置请求。
- axios
  使用更直观的 API，使用
  .then()
  或
  async/await
  来处理异步，提供了更丰富的配置选项。
请求和响应处理：
- fetch
  需要使用
  .json()
  方法来解析 JSON 响应数据，不同类型的响应需要不同的解析方式。
- axios
  会自动解析 JSON 响应数据，并提供了可以直接获取响应数据的 API。
错误处理：
- fetch
  在响应状态码不为 200 时也会返回成功的 Promise，需要手动检查响应的
  ok
  属性或使用
  .catch()
  来处理错误。
- axios
  会自动根据状态码来判断响应是成功还是失败，可以通过
  .catch()
  来处理错误。
取消请求：
- fetch
  本身不提供直接的请求取消功能，需要使用
  AbortController
  来实现。
- axios
  提供了内置的请求取消功能，可以方便地取消正在进行的请求。
浏览器兼容性：
- fetch
  是现代浏览器的标准特性，较旧的浏览器可能需要使用 polyfill。
- axios
  对于不支持 Promise 的环境需要提供额外的 polyfill。

选择使用
fetch
还是
axios
取决于您的具体需求和项目环境。
fetch
是现代浏览器内置的 API，适用于基本的网络请求，而
axios
提供了更丰富的功能和更友好的 API，适用于更复杂的网络请求场景。

原文链接：https://blog.csdn.net/study_way/article/details/132366678

什么是Fetch API

Fetch API 的主要 API

与axios区别

你可能也喜欢