6 分钟学会 Fetch API：JavaScript 异步请求入门

引言

大家好！今天的文章是一个快速教程，我将向你展示如何使用浏览器内置的 Fetch API 来进行异步请求，访问不同的网络资源。无论是 GET、POST、PUT 还是其他请求方式，Fetch API 都能轻松搞定。让我们开始吧！

简介

欢迎回到 Web Dev Simplified，我是 Kyle，我的工作是帮你简化 Web 开发，让你更快地开始构建梦想中的项目。如果你对这类内容感兴趣，别忘了订阅我的频道，获取更多类似的视频。

准备工作

为了方便演示，我在右侧打开了一个简单的 JavaScript 页面，并且打开了控制台。我们在左侧输入的代码，其运行结果会直接显示在右侧。

Fetch API 基础

什么是 Fetch API？

Fetch API 是浏览器内置的一个强大工具，用于发起网络请求并处理响应。它支持多种 HTTP 方法（如 GET、POST、PUT、DELETE 等），并且基于 Promise，可以方便地进行异步操作。

基本用法

我们先从一个简单的 GET 请求开始。我们将调用一个假的 API，它会返回一些模拟数据。例如，我们可以获取 API 中的所有用户。

fetch('https://fakeapi.com/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

• fetch()：接受一个 URL 作为参数，返回一个 Promise。
• response.json()：将响应体转换为 JSON 格式，也返回一个 Promise。
• .then()：用于处理 Promise 的成功结果。
• .catch()：用于捕获 Promise 的错误。

输出结果：我们可以在控制台中看到返回的用户数据。

获取单个资源

接下来，我们尝试获取一个特定的用户，比如用户 ID 为 23。

fetch('https://fakeapi.com/users/23')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

• response.ok：检查响应状态是否为成功（200-299）。
• response.statusText：获取响应的状态文本。

输出结果：如果用户存在，我们将看到用户数据；如果用户不存在，我们将看到错误信息。

发送数据：POST 请求

Fetch API 不仅可以用于获取数据，还可以用于向服务器发送数据。例如，我们可以创建一个新用户。

fetch('https://fakeapi.com/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'User 1' })
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

• method：指定请求方法（如 ‘POST’）。
• headers：设置请求头，例如 ‘Content-Type’。
• body：发送的数据，必须是字符串格式，因此需要使用 JSON.stringify()。

输出结果：如果请求成功，我们将看到新创建的用户数据。

错误处理

Fetch API 只有在网络错误（如无法连接到服务器）时才会失败。即使服务器返回了错误状态码（如 404 或 500），Fetch API 仍然会认为操作成功。因此，我们需要手动检查响应状态。

fetch('https://fakeapi.com/users/23')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

输出结果：如果用户不存在，我们将看到错误信息。

总结

Fetch API 是一个非常强大的工具，可以帮助你轻松地与网络资源进行交互。它基于 Promise，支持异步操作，可以处理各种 HTTP 请求方法。在使用 Fetch API 时，需要注意以下几点：

• Promise 基础：Fetch API 返回的是一个 Promise，因此你需要使用 .then() 或 async/await 来处理异步操作。
• 响应处理：你需要调用 .json() 方法将响应转换为 JSON 格式。
• 错误处理：你需要检查响应对象的 ok 属性来确定请求是否成功。
• 发送数据：在发送数据时，需要将数据转换为 JSON 格式，并设置正确的 Content-Type 头部。"

原文引自YouTube视频：https://www.youtube.com/watch?v=cuEtnrL9-H0