为啥在typescript项目中需要封装fetch

2023-09-17 15:02:50

前言

在现代的前端项目中，我们经常需要发送HTTP请求来获取数据。为了方便我们发送请求，fetch API 应运而生。fetch API 是一个标准的浏览器 API，它允许我们以更简单的方式发送HTTP请求。然而，fetch API 的功能有限，我们经常需要对它进行封装，以满足我们项目的需要。

封装`fetch`函数的好处

封装fetch函数有很多好处，其中包括：

添加api前缀： 我们可以将api前缀添加到fetch函数中，这样我们就不需要在每次请求中都手动添加api前缀了。
添加鉴权token数据： 我们可以将鉴权token数据添加到fetch函数中，这样我们就不需要在每次请求中都手动添加鉴权token数据了。
全局对request，response数据进行处理： 我们可以对请求和响应数据进行全局处理，例如，我们可以将请求数据转换为JSON格式，将响应数据解析为JSON格式。
使用中间件： 我们可以使用中间件来对fetch函数进行扩展。中间件可以用来做很多事情，例如，我们可以使用中间件来记录请求和响应数据，我们可以使用中间件来做缓存，我们可以使用中间件来做权限控制。

如何封装`fetch`函数

封装fetch函数有很多种方法，我们可以根据自己的需要选择一种方法。以下是一种封装fetch函数的方法：

//创建一个fetch函数
const fetch = (input: RequestInfo, init?: RequestInit): Promise<Response> => {
  //添加api前缀
  if (typeof input === 'string') {
    input = apiPrefix + input;
  }

  //添加鉴权token数据
  if (token) {
    if (!init) {
      init = {};
    }
    init.headers = {
      ...init.headers,
      Authorization: `Bearer ${token}`
    };
  }

  //全局对request，response数据进行处理
  return fetch(input, init)
    .then(response => {
      return response.json();
    });
};

我们也可以使用第三方库来封装fetch函数，例如，我们可以使用axios库来封装fetch函数。

如何使用封装后的`fetch`函数

使用封装后的fetch函数非常简单，我们只需要在原来的代码中将fetch函数替换为封装后的fetch函数即可。例如，以下代码演示了如何使用封装后的fetch函数：

//发送一个GET请求
fetch('api/users')
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

//发送一个POST请求
fetch('api/users', {
  method: 'POST',
  body: JSON.stringify({
    name: 'John Doe',
    email: 'john.doe@example.com'
  })
})
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });