发出网络请求是前端 Web 开发人员的一项常见任务。对 Fetch api 的深入理解对于任何现代 Web 开发人员来说都是必不可少的，无论是从 API 检索数据还是将数据发送到服务器。

我已经开发网站十多年了，还记得我们不得不依赖 XMLHttpRequest 来发出网络请求的时候。我以为我当时对如何发出网络请求有很好的理解，但后来 Fetch API 的出现改变了一切。

Fetch API 是 JavaScript 发出网络请求的现代方式。它比 XMLHttpRequest 更易于使用，语法更简洁。在本文中，我将介绍 Fetch API 的基础知识以及如何在您的 Web 项目中使用它来发出网络请求。

什么是 Fetch API 

Fetch API 是一种网络标准，允许您发出网络请求。与 XMLHttpRequest 相比，它旨在为发出网络请求提供更清晰、更易于使用的语法。Fetch API 是一个低级 API，这意味着它的功能集有限，但它也非常灵活，可以处理范围广泛的网络请求。

使用 Fetch API 发出 GET 请求

使用 Fetch API 的 GET 请求非常简单。您只需要要检索的资源的 URL 即可开始。

以下是使用 Fetch API 发出的GET 请求的示例：

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

在此示例中，我们将向 JSONPlaceholder API 发出 GET 请求以获取帖子列表。fetch() 方法将要检索的资源的 URL 作为其第一个参数。然后使用 .then() 方法处理服务器响应。response.json() 方法用于将响应解析为 JSON 对象，然后再次使用 .then() 方法将数据记录到控制台。最后，.catch() 方法用于记录可能发生的任何错误。

使用 Fetch API 发出 POST 请求

使用 Fetch API 的 POST 请求与 GET 请求一样简单。唯一的区别是我们必须包含一些数据才能发送到服务器。

以下是使用 Fetch API 发出的 POST 请求的示例：

const data = { title: 'New Post', body: 'This is a new post.' };

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
    // Now that we have the data, we can do something with it. For example, let's say we want to display a list of users:
    const usersList = document.querySelector('#users-list');
    data.forEach(user => {
      const li = document.createElement('li');
      li.textContent = user.name;
      usersList.appendChild(li);
    });
  })
.catch(error => console.error(error));

就这样！您现在了解了如何使用 Fetch API 来发出网络请求。

但是等等，还有更多！

因为 Fetch API 是一个低级 API，它并没有为我们处理一些常见的问题。如果请求失败（例如，服务器返回 500 Internal Server Error），则执行 catch 块。如果服务器返回 200 OK 响应但响应主体是错误消息，则不会执行 catch 块。要处理这些情况，请检查 then() 块中的响应状态，如果不在 200 和 299 之间则抛出错误。这是最新版本的代码：

fetch('https://jsonplaceholder.typicode.com/users')
.then(response => {
  if (!response.ok) {
    throw new Error(HTTP error! status: ${response.status});
  }
  return response.json();
})
.then(data => {
  console.log(data);
  // Do something with the data
})
.catch(error => console.error(error));

现在就这些了，伙计们！我希望您获得了一些有关 Fetch API 的新知识和有用的知识。如果您有任何问题或意见，请通过 Twitter 与我联系。

在 JavaScript 中发出网络请求对任何 Web 开发人员来说都是至关重要的，而 Fetch API 使它变得简单。Fetch API 可以帮助您构建从简单的博客到复杂的 Web 应用程序的任何内容。所以，不要害怕立即开始使用它！

英文原文：https://medium.com/front-end-weekly/making-network-requests-with-the-fetch-api-in-javascript-aa0eb2fcbe36