Fetch - JavaScript

fetch 是 JavaScript 中用于发送网络请求的现代 API。它提供了一种更简单、更强大的方法来处理网络通信，取代了传统的 XMLHttpRequest。

介绍

fetch 函数允许您发送网络请求并处理响应。它返回一个 Promise 对象，使您能够使用 then 和 catch 方法来处理异步操作。

示例

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

在上述示例中，我们使用 fetch 发送一个 GET 请求到 'https://api.example.com/data'，并通过 response.json() 将响应解析为 JSON 数据。然后，我们可以在 then 方法中利用数据进行进一步处理或显示。

请求方法

fetch 函数允许您使用不同的 HTTP 方法发送请求。默认情况下，它使用 GET 方法。您可以通过传递一个可选的配置对象来指定其他的 HTTP 方法、请求头、请求体等。

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

在上述示例中，我们发送了一个 POST 请求，并通过 headers 和 body 配置项传递了 JSON 数据。

处理错误

使用 fetch 向服务器发送请求时，可能会出现网络错误或 HTTP 错误。您可以使用 catch 方法来捕捉这些错误并进行处理。

fetch('https://api.example.com/data')
  .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);
  });

在上述示例中，我们首先检查响应对象的 ok 属性，如果为 false，则抛出一个自定义错误。

特点

• fetch 提供了一个现代、灵活的方式来处理网络请求，替代了传统的 XMLHttpRequest。
• 它是基于 Promise 的，使异步操作更易于管理。
• 可以发送不同类型的请求，并自定义请求头、请求体等。
• 可以处理响应的不同数据类型，如 JSON、文本等。
• 可以简单地捕获和处理网络错误和 HTTP 错误。

总结

fetch 是 JavaScript 中用于发送网络请求的重要 API。它提供了更简单、更强大的方式来处理网络通信。它基于 Promise，并具有灵活的特性，使您能够轻松地发送请求、处理响应和处理错误。

使用 fetch，您可以更好地管理您的网络请求，并构建出更可靠、高效的 JavaScript 应用程序。

如果您想了解更多关于 fetch API 的详细信息，请查阅 MDN 文档。