Fetch网络请求封装示例详解

在前端开发中，我们经常需要用到网络请求获取数据，而fetch是一种比较常用的网络请求方式之一。本文将介绍如何对fetch进行封装，使其更加易用。

封装fetch

封装fetch有以下几个优点：

• 可以统一处理错误码；
• 可以统一处理请求头等信息；
• 可以简化请求方式，降低重复代码。

首先，我们可以将fetch封装成一个函数，如下所示：

function fetchData(url, options) {
  return fetch(url, options)
    .then(response => {
      if (response.ok) {
        return response.json();
      }
      throw new Error('Network response was not ok');
    })
    .catch(error => {
      console.log('There was a problem with the fetch operation:', error);
    })
}

上述代码中，我们把fetch封装成了名为fetchData的函数，传入参数为请求的URL和options对象。options对象包括请求方法、请求头和请求体等信息。

在函数中，我们使用fetch进行网络请求，然后通过Promise的then方法来处理请求结果。在这里，当请求成功返回数据时，我们使用json方法来解析响应体。当返回状态码为错误码或网络请求失败时，则使用catch方法处理错误情况。

使用封装后的fetch

使用封装后的fetch方法，我们能够在代码中简化请求方式，同时也能更好地处理请求错误。下面介绍两个使用案例：

GET请求

假设我们需要使用GET请求获取一个用户列表。我们使用封装后的fetchData函数来实现：

fetchData('/api/users')
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  })

在代码中，我们简单地传入url参数/api/users，并使用then方法处理响应数据。如果请求出错，则会通过catch方法捕获错误。

POST请求

假设我们需要使用POST请求创建一个用户。我们使用封装后的fetchData函数来实现：

const newUser = {
  name: '张三',
  age: 18
}

fetchData('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(newUser)
})
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  })

在代码中，我们传入了url和封装后的options对象，其中指定了请求方法和请求头，并将newUser数据以json格式放入请求体中。如果请求成功，则可以通过then方法获取响应数据，如果失败，则会通过catch方法捕获错误。

这就是 fetch 网络请求封装的示例内容，通过封装使得 fetch 的请求处理更加方便，提高代码的可维护性和可读性。