浅谈Fetch API

原文合集地址如下，有需要的朋友可以关注

本文地址

什么是Fetch API

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

Fetch API 具有以下特点：

1. Promise 风格的 API： Fetch API 使用 Promise 对象进行异步操作的处理。这使得处理异步操作变得更加直观和易于管理。

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

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

4. 内置 JSON 解析： 在 Fetch API 中，处理 JSON 数据更加方便。默认情况下，响应数据会被自动解析为 JSON 对象。

5. 跨域请求支持： 与 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：

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

fetch(url, options);

1. Response 对象：

   • 表示一个 HTTP 响应，它包含响应头、响应状态、响应数据等信息。

2. Request 对象：

   • 表示一个 HTTP 请求，可以用于自定义请求头、请求方法等。

3. Headers 对象：

   • 用于操作和管理请求和响应的头部信息。

4. RequestInit 参数对象：

   • 在 fetch() 方法中，可以通过这个对象设置请求的各种选项，如请求方法、请求头、请求体等。

5. Body 对象：

   • 用于操作请求和响应的数据体（请求体和响应体），可以通过 .json()、.text() 等方法解析响应数据。

6. Response 方法和属性：

   • .json()：返回一个 Promise，解析响应数据为 JSON 对象。
   • .text()：返回一个 Promise，解析响应数据为文本字符串。
   • .blob()：返回一个 Promise，解析响应数据为二进制 Blob 对象。
   • .arrayBuffer()：返回一个 Promise，解析响应数据为 ArrayBuffer 对象。
   • .ok：一个只读属性，表示响应是否成功。
   • .status：一个只读属性，表示响应的状态码。

7. CORS 相关选项：

   • mode：设置请求模式，如 "cors"（跨域请求）、"same-origin"（同源请求）、"no-cors"（不允许跨域请求）。
   • credentials：设置请求是否携带跨域请求的凭据，如 "include"、"same-origin"、"omit"。

8. AbortController 和 AbortSignal：

   • 用于实现请求的取消功能，通过 AbortController 可以创建一个控制器，然后将其与请求关联，通过 AbortSignal 可以监听请求的取消事件。

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

与axios区别

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

1. API 风格：

   • fetch 是浏览器内置的原生 API，用于进行网络请求。它返回 Promise 对象，采用 Promise 风格的异步编程。
   • axios 是一个基于 Promise 的第三方库，提供了更高级的 API，可以在浏览器和 Node.js 环境中使用。

2. 全局性：

   • fetch 是浏览器的全局对象，可直接在浏览器环境中使用。
   • axios 需要通过导入库后使用，可以在浏览器和 Node.js 环境中使用。

3. 语法和配置：

   • fetch 使用基于方法的链式调用，如 .then()，并提供了一组参数来配置请求。
   • axios 使用更直观的 API，使用 .then() 或 async/await 来处理异步，提供了更丰富的配置选项。

4. 请求和响应处理：

   • fetch 需要使用 .json() 方法来解析 JSON 响应数据，不同类型的响应需要不同的解析方式。
   • axios 会自动解析 JSON 响应数据，并提供了可以直接获取响应数据的 API。

5. 错误处理：

   • fetch 在响应状态码不为 200 时也会返回成功的 Promise，需要手动检查响应的 ok 属性或使用 .catch() 来处理错误。
   • axios 会自动根据状态码来判断响应是成功还是失败，可以通过 .catch() 来处理错误。

6. 取消请求：

   • fetch 本身不提供直接的请求取消功能，需要使用 AbortController 来实现。
   • axios 提供了内置的请求取消功能，可以方便地取消正在进行的请求。

7. 浏览器兼容性：

   • fetch 是现代浏览器的标准特性，较旧的浏览器可能需要使用 polyfill。
   • axios 对于不支持 Promise 的环境需要提供额外的 polyfill。

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