化繁为简：Axios进阶技巧，重复请求不再烦恼

利用 Axios 封装实现重复请求共享结果和取消请求

在日常软件开发中，网络请求是必不可少的任务。然而，重复发送相同的请求既浪费资源，又降低了效率。本文将深入探讨如何利用 Axios 库封装网络请求，实现重复请求共享结果和取消重复请求，从而优化你的应用程序性能。

封装 Axios 实例

首先，你需要在项目中安装 Axios 库。

npm install axios

然后，创建一个 Axios 实例，以便统一管理和使用网络请求。

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://your-api-endpoint.com',
  timeout: 10000,
});

重复请求共享结果

通过封装的 Axios 实例发送请求时，它会自动缓存响应结果。当再次发送相同的请求时，Axios 会直接从缓存中返回结果，无需重复请求服务器。这极大地提高了性能，尤其是在频繁发送相同请求的情况下。

取消重复请求

有时候，你可能需要取消正在进行的请求。比如用户在单击按钮时触发了一个请求，但又取消了操作。你可以使用 Axios 的 cancelToken 来实现取消请求。

const source = axios.CancelToken.source();

instance.get('/api/users', {
  cancelToken: source.token,
}).then((res) => {
  console.log(res.data);
});

source.cancel();

共享正确请求的结果

虽然你可以取消重复请求，但可能仍存在以下情况：

• 正确的请求已经发送
• 请求被取消，但你仍然需要获取正确请求的结果

使用 Axios 的拦截器，你可以订阅正确请求的结果并将其发布给订阅者。

instance.interceptors.response.use((res) => {
  if (res.config.cancelToken) {
    // 请求被取消
    return Promise.reject(new Error('Request canceled'));
  }

  // 发布正确请求的结果
  publish(res);

  return res;
});

发布订阅模式

你可以使用发布订阅模式订阅正确请求的结果。

const callbacks = [];

function subscribe(callback) {
  callbacks.push(callback);
}

function publish(res) {
  callbacks.forEach((callback) => {
    callback(res);
  });
}

使用示例

以下是使用上述封装的 Axios 实例发送请求的示例。

instance.get('/api/users').then((res) => {
  console.log(res.data);
}).catch((error) => {
  if (axios.isCancel(error)) {
    console.log('Request canceled');
  } else {
    console.error(error);
  }
});

// 订阅正确请求的结果
subscribe((res) => {
  console.log('Correct request result:', res.data);
});

常见问题解答

1. 为什么我应该使用 Axios 封装？

Axios 封装提供了统一的网络请求管理方式，简化了代码并提高了可维护性。

2. 如何取消所有正在进行的请求？

可以使用 axios.CancelToken.source().cancel() 取消所有正在进行的请求。

3. 如何确保只有正确的请求结果被发布？

在拦截器中检查 res.config.cancelToken，如果请求被取消，则拒绝 Promise 并发布错误消息。

4. 如何在组件卸载时取消请求？

在组件的 useEffect 钩子中使用 instance.get() 发送请求，并在 useEffect 的清理函数中使用 source.cancel() 取消请求。

5. 如何在 Axios 实例中设置全局错误处理程序？

instance.interceptors.response.use(
  (res) => res,
  (error) => {
    // 全局错误处理
  }
);