封装 Fetch 请求

简介：在 JavaScript 中，Fetch API 是一个强大的工具，用于发送 HTTP 请求。然而，Fetch API 返回的是一个 Promise，这使得处理异步请求变得有些复杂。为了简化这个过程，我们可以封装 Fetch 请求，使其更易于使用。

在 JavaScript 中，Fetch API 是一个用于发送 HTTP 请求的强大工具。然而，Fetch API 返回的是一个 Promise，这使得处理异步请求变得有些复杂。为了简化这个过程，我们可以封装 Fetch 请求，使其更易于使用。下面是一个简单的封装示例：

function fetchData(url, options = {}) {
  return new Promise((resolve, reject) => {
    fetch(url, options)
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        } else {
          resolve(response);
        }
      })
      .catch(error => reject(error));
  });
}

使用上述函数，你可以像这样发送 GET 请求：

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

你也可以向封装函数传递额外的选项，如请求方法、请求头和请求体：

fetchData('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));

通过封装 Fetch API，我们可以简化异步请求的处理，并提供一个更易于使用的接口。你可以根据自己的需求进一步扩展和定制这个封装函数。

封装 Fetch 请求

最热文章