如何告别重复请求？Axios二次封装这样做！

前端

2023-05-04 02:22:17

重构 Axios：打造一个全能的请求工具

在现代前端开发中，Axios 库是构建网络请求的基石。然而，传统上对 Axios 的封装过于简单，无法满足日益增长的项目需求，尤其是涉及到特殊的接口返回、弱网环境或独特的产品功能。

问题所在：重复请求的噩梦

传统的 Axios 封装通常会出现重复请求的问题。例如，在网络不稳定的情况下，用户可能会重复点击一个按钮以提交请求。这会导致服务器收到多个相同的请求，造成不必要的负担，并可能影响用户体验。

全面解决方案：提升 Axios 的能力

为了解决这些问题并提升 Axios 的能力，我们提出了一个全面的二次封装方案，包括以下关键功能：

1. 引入缓存机制，告别重复请求

通过引入缓存机制，我们的封装可以防止重复请求的发生。在发送请求之前，系统会检查缓存中是否已经存在该请求的结果。如果存在，则直接返回缓存结果，避免了重复的网络请求，既节省了时间又减轻了服务器的负担。

2. 灵活拦截器，满足特殊需求

我们的封装提供了强大的请求拦截器和响应拦截器，让开发人员可以在请求发送之前和响应返回之后进行自定义处理。通过拦截器，可以轻松实现诸如添加请求头、修改请求参数、处理特殊响应数据等操作，从而满足项目中各种各样的特殊需求。

3. 统一错误处理，简化异常处理

为了简化错误处理，我们的封装提供了一个统一的错误处理机制。当请求发生错误时，系统会自动捕获错误信息，并根据错误类型进行不同的处理。这消除了开发人员手动处理错误的需要，提高了开发效率。

4. 代码示例：解锁强大的功能

// 封装 Axios
const axios = axios.create({
  // 设置请求超时时间
  timeout: 30000,
});

// 请求拦截器
axios.interceptors.request.use((config) => {
  // 在发送请求前做一些处理
  // 例如，添加请求头
  config.headers['Content-Type'] = 'application/json';
  return config;
}, (error) => {
  // 请求错误时做一些处理
  // 例如，显示错误提示
  return Promise.reject(error);
});

// 响应拦截器
axios.interceptors.response.use((response) => {
  // 在收到响应后做一些处理
  // 例如，处理特殊响应数据
  const { data } = response;
  if (data.code === 0) {
    // 请求成功
    return data.data;
  } else {
    // 请求失败
    return Promise.reject(data.message);
  }
}, (error) => {
  // 响应错误时做一些处理
  // 例如，显示错误提示
  return Promise.reject(error);
});

// 使用封装好的 Axios 发送请求
axios.get('/api/user').then((res) => {
  console.log(res);
}).catch((err) => {
  console.log(err);
});