前端数据请求的优雅处理与抽象设计方案

2024-01-07 22:40:45

数据请求是我们开发中非常重要的一环，如何优雅地进行抽象处理，不是一件很容易的事情，也是经常被忽略的事情，处理不好的话，重复的代码散落在各处，维护成本极高。所以我们需要好好梳理下数据请求涉及到哪些方面，对它有整体的管控，从而设计出扩展性高的方案。下面我们以 axios 这个请求库来进行详细说明。

1. axios 实例的设置

1.1 创建 axios 实例

第一步是创建一个 axios 实例。这可以通过调用 axios.create() 方法来完成。这个方法接受一个包含配置选项的对象作为参数。这些选项可以用于自定义 axios 实例的行为。

例如，我们可以创建一个 axios 实例，它使用 baseURL 选项来指定所有请求的基 URL：

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com'
});

1.2 添加请求头

我们还可以使用 headers 选项来添加默认的请求头。例如，我们可以创建一个 axios 实例，它始终将 Content-Type 头设置为 application/json：

const axiosInstance = axios.create({
  headers: {
    'Content-Type': 'application/json'
  }
});

1.3 设置超时时间

我们还可以使用 timeout 选项来设置请求的超时时间。例如，我们可以创建一个 axios 实例，它将在 10 秒后超时：

const axiosInstance = axios.create({
  timeout: 10000
});

2. 处理不同的请求类型

axios 支持所有常见的 HTTP 请求类型，包括 GET、POST、PUT、DELETE 等。我们可以使用 axios.get()、axios.post()、axios.put() 和 axios.delete() 方法来发送这些请求。

例如，我们可以发送一个 GET 请求来获取数据：

axiosInstance.get('/users')
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

我们也可以发送一个 POST 请求来创建数据：

axiosInstance.post('/users', {
  name: 'John Doe',
  email: 'john.doe@example.com'
})
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    console.error(error);
  });

3. 使用拦截器来处理请求和响应

axios 允许我们使用拦截器来处理请求和响应。拦截器是一个函数，它将在每个请求或响应被发送或接收之前被调用。

我们可以使用 axios.interceptors.request.use() 和 axios.interceptors.response.use() 方法来添加拦截器。

例如，我们可以添加一个拦截器来记录所有请求的 URL：

axiosInstance.interceptors.request.use((config) => {
  console.log(config.url);

  return config;
});

我们也可以添加一个拦截器来处理所有响应的错误：

axiosInstance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    console.error(error);

    return Promise.reject(error);
  }
);

4. 使用 axios 来管理并发请求

axios 可以用来管理并发请求。我们可以使用 axios.all() 方法来发送多个请求，并等待所有请求都完成。

例如，我们可以发送两个请求，一个请求获取用户列表，另一个请求获取每个用户的详细信息：

axiosInstance.all([
  axiosInstance.get('/users'),
  axiosInstance.get('/users/1'),
  axiosInstance.get('/users/2')
])
  .then((responses) => {
    const users = responses[0].data;
    const user1 = responses[1].data;
    const user2 = responses[2].data;

    console.log(users);
    console.log(user1);
    console.log(user2);
  })
  .catch((error) => {
    console.error(error);
  });