获取API完整指南

Fetch API 简介

Fetch API 是一种现代的原生 JavaScript API，允许您以简单灵活的方式发出 HTTP 请求。它为 XMLHttpRequest 等旧技术提供了更简单、更干净的替代方案。 Fetch 是基于 Promise 的，这意味着它可以很好地与现代 JavaScript 功能（例如 async/await 和 .then() 链接）配合使用。

Fetch API 提供了一种易于理解的与 RESTful API 交互的方式，可以处理简单和复杂的请求。它在现代浏览器中得到广泛支持，是 Web 开发的常用工具。

Fetch API 的主要特性：

1. 基于 Promise：基于 Promise 构建，提供一种简单直观的方式来管理异步代码。
2. 支持所有 HTTP 方法：GET、POST、PUT、DELETE、PATCH 等
3. 没有回调地狱：感谢 Promises，它避免了嵌套回调。
4. 流支持：Fetch 支持流，这使得它适合高效处理大量数据。
5. 改进的错误处理：与 XMLHttpRequest 不同，Fetch API 不会拒绝 HTTP 错误状态（例如 404 或 500）。你必须手动处理这些。

安装

Fetch API 内置于现代网络浏览器中，这意味着如果您在浏览器环境中工作，则无需安装任何内容。它本身可用并可用于发出 HTTP 请求。

但是，如果您在 Node.js 环境中工作（原生不支持 fetch），则可以安装诸如 node-fetch 之类的 polyfill。

1.使用 npm （适用于 Node.js 环境）：

如果您在 Node.js 环境中工作并且需要使用 Fetch，您可以安装 node-fetch：

npm install node-fetch

然后，将其导入到您的项目中：

const fetch = require('node-fetch');

使用获取 API

Fetch API 提供了一个全局 fetch() 函数，您可以使用它来发出 HTTP 请求。此函数返回一个 Promise，该 Promise 解析为表示对请求的响应的 Response 对象。

语法

fetch(url, [options])

参数

1. 网址:

   • 类型：字符串
   • 描述：请求发送到的 URL。这可以是完整 URL 或基于请求中定义的基本 URL 的相对 URL。

2. 选项 （可选）：

   • 类型：对象
   • 描述：用于修改请求的可选配置对象。一些常见的选项包括：
     • 方法：HTTP 方法（例如 GET、POST、PUT、DELETE）。
     • headers：要包含在请求中的自定义标头（例如，内容类型、授权）。
     • body：请求正文（仅适用于 POST 或 PUT 等方法）。
     • mode：控制跨域请求。 （例如，“cors”、“no-cors”、“同源”）。
     • cache：指定请求如何与缓存交互（例如，“no-store”、“reload”）。
     • 凭证：控制 cookie 和身份验证（例如，“同源”、“包含”）。

基本获取请求 (GET)

使用 Fetch API 的基本 GET 请求非常简单。 fetch() 函数向提供的 URL 发出请求并返回一个使用 Response 对象解析的 Promise。

示例代码：

这是使用 Fetch API 的简单 GET 请求的示例：

npm install node-fetch

说明：

• fetch() 向给定的 URL 发起请求。
• .then(response => response.json())：通过解析 JSON 数据将 Response 对象转换为 JavaScript 对象。
• .catch()：捕获并记录任何错误，例如网络错误或失败的请求。

使用 Fetch 发出 POST 请求

Fetch API 还允许您发出 POST 请求。 POST 请求通常用于向服务器发送数据，例如提交表单或创建新资源。

POST 请求的语法：

const fetch = require('node-fetch');

示例代码：

以下是向服务器发送数据的 POST 请求示例：

fetch(url, [options])

说明：

• method: 'POST'：指定这是一个 POST 请求。
• body: JSON.stringify(postData)：将数据转换为 JSON 字符串，然后将其发送到请求正文中。
• headers：将 Content-Type 标头设置为 application/json 以指示发送的数据为 JSON 格式。

处理响应数据

Fetch API 返回的 Response 对象包含多个用于与响应数据交互的属性和方法。

响应的关键属性和方法：

1. response.json()：将响应正文解析为 JSON。
2. response.text()：将响应正文解析为字符串。
3. response.blob()：将响应解析为二进制大对象（对于处理图像或文件很有用）。
4. response.ok：一个布尔值，指示响应状态代码是否在 200-299 范围内（成功）。
5. response.status：响应的 HTTP 状态代码（例如，200 表示成功，404 表示未找到）。
6. response.headers：服务器响应请求返回的标头。

示例代码：

以下是如何处理不同类型的响应数据的示例：

npm install node-fetch

说明：

• response.ok 检查响应是否成功（状态代码 200-299）。如果没有，则会抛出错误。
• response.json() 被调用以将响应解析为 JavaScript 对象。

处理获取错误

与 XMLHttpRequest 不同，Fetch API 不会自动拒绝 HTTP 错误状态（例如 404 或 500）。仅当出现网络故障或请求被阻止时才会拒绝。要处理 404 或 500 等错误，您需要检查 response.ok 属性。

错误处理示例：

以下是如何在 Fetch 中有效处理错误的示例：

const fetch = require('node-fetch');

说明：

• response.ok：检查响应状态代码是否在 200–299 范围内（表示成功）。
• 如果请求失败（例如404或500错误），则会抛出错误并带有相应的状态码。

结论

Fetch API 是一个强大的现代工具，用于在 JavaScript 中发出 HTTP 请求。它提供了一种干净直观的方式来使用 REST API，并且其基于承诺的架构使管理异步代码变得容易。 Fetch 支持所有 HTTP 方法、错误处理和响应解析，是 Web 开发人员的必备工具。

无论您是获取数据、提交表单还是处理身份验证，Fetch API 都可以提供对 HTTP 请求的灵活性和控制，使其成为现代 Web 应用程序的绝佳选择。

以上是获取API完整指南的详细内容。更多信息请关注PHP中文网其他相关文章！