Fetch API 趣味入门：Web 请求新手指南 🔎🌐

与外部 API（应用程序编程接口）交互已成为Web 开发中的一项基本技能。

通过本文学习 Fetch API 的基础知识，并在文章末尾找到相关资源链接，继续您的学习之旅。

在编程中，当我们想从互联网上的其他地方获取信息时，我们会使用一种叫做 API 的东西。

我们在 JavaScript 中与 API 通信时使用的一个工具叫做Fetch API。

今天，我们将学习 Fetch API 的所有知识及其工作原理，我还会向你展示一个有趣的例子，以便你可以自己尝试一下。

1️⃣ 什么是 Fetch API？+ 用法

Fetch API 是一个JavaScript 接口， 用于发出网络请求，包括使用 HTTP 从服务器获取数据或向服务器发送数据。

Fetch API 是一个现代化的、基于 Promise 的JavaScript API，用于在 Web 应用程序中发出网络请求。

引入它是为了取代较旧且灵活性较差的 XMLHttpRequest 对象，该对象通常与 AJAX 相关联。

Fetch API 也非常易于使用。

您创建了一个名为 fetch() 的函数，该函数接受一个 URL 作为参数并返回一个 Promise。

然后您可以使用 .then() 和 .catch() 方法来处理响应和任何错误。

2️⃣ 关键概念

➡️ 请求和回复

Fetch API 涉及向 URL 发送请求
（例如，GET、POST、PUT、DELETE），并从服务器接收响应。

➡️ 承诺

Fetch API 使用 JavaScript Promises 来处理异步操作，使其更高效、更易于使用。

➡️ CORS

跨域资源共享 (CORS) 是向不同域发出请求时需要考虑的重要因素。

Fetch 默认处理 CORS。

了解更多信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

➡️ 请求选项

您可以通过在 fetch() 函数中提供各种选项来配置请求，例如POST 请求的方法、标头和正文。

➡️ 处理回复

.then() 方法用于处理响应。

您可以使用.json()、.text() 或 .blob()等方法，根据预期的内容类型解析响应。

3️⃣ 更多内容

➡️ 错误处理

.catch()方法用于处理请求过程中发生的错误。

➡️ 标题

您可以在请求中设置标头以提供附加信息，例如身份验证令牌或内容类型。

➡️ 异步/等待

您还可以将async/await与 Fetch 结合使用，以获得更简洁、更易读的代码。

➡️ 身份验证

向安全端点发出请求时，可以包含身份验证令牌或凭据。

➡️ 跨域请求

Fetch 可以很好地处理跨域请求，您可以使用模式和凭据等选项来控制 CORS 行为。

4️⃣ 代码示例

fetch("https://official-joke-api.appspot.com/random_joke")
  .then((response) => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then((data) => {
    console.log("Joke:", data.setup);
    console.log("Punchline:", data.punchline);
  })
  .catch((error) => {
    console.error('There was a problem with your fetch operation:', error);
  });

这会向指定的 API URL 发送 GET 请求，以获取一个随机笑话。

它首先检查响应是否成功（状态码 200）。

如果成功，它会将响应正文解析为 JSON 格式。

然后，它会根据检索到的数据记录笑话的铺垫和笑点。

如果出现任何响应失败的情况，它会捕获错误并记录相应的消息。

PS：复制这段代码并粘贴到控制台，就能看到奇迹发生！

🙌 最后想说的话

资源：

观看这些视频，学习实际使用方法：

• https://www.youtube.com/watch?v=cuEtnrL9-H0
• https://youtu.be/37vxWr0WgQk
• https://youtu.be/yVRWSqIUWzY

深入了解相关文档：

• https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
• https://web.dev/articles/introduction-to-fetch
• https://www.freecodecamp.org/news/how-to-fetch-data-from-an-api-using-the-fetch-api-in-javascript/

请在评论区留下您对本文的看法！

好了，今天就到这里！

希望这篇文章对您有所帮助❤️

请通过Linktree联系我。

关注我的推特账号 @Twitter ，优质内容即将上线！

编程愉快！🚀
感谢 26359 位用户的支持！🤗