Axios请求终极封装：取消重复请求、请求失败自动重试、请求接口数据缓存

2024-02-07 14:01:10

在前端开发中，Axios库是一个广受欢迎的用于发送HTTP请求的JavaScript库。然而，当我们使用Axios发送大量请求时，可能会遇到重复请求、请求失败和接口数据缓存等问题。

为了解决这些问题，本文将介绍Axios的终极封装，包括取消重复请求、请求失败自动重试和请求接口数据缓存。

取消重复请求

重复请求是指在当前请求未完成的情况下，又发起了相同的请求。为了避免这种情况，我们可以使用Axios提供的 cancelToken 机制。

具体实现如下：

const cancelToken = axios.CancelToken;
const source = cancelToken.source();

const request = axios({
  url: 'https://example.com/api/v1/users',
  method: 'get',
  cancelToken: source.token
});

// 在需要取消请求时调用
source.cancel('Operation canceled by the user.');

请求失败自动重试

当请求失败时，我们可以使用Axios的 retry 插件来自动重试请求。该插件允许我们指定重试次数和重试间隔。

具体实现如下：

const retry = require('axios-retry');

const axiosWithRetry = retry(axios, {
  retries: 3, // 重试次数
  retryDelay: 1000, // 重试间隔（毫秒）
});

const request = axiosWithRetry({
  url: 'https://example.com/api/v1/users',
  method: 'get',
});

请求接口数据缓存

为了提高性能，我们可以使用Axios的 cacheAdapter 插件来缓存接口数据。该插件允许我们在一定时间内避免向后台发送重复请求，从而提高页面加载速度。

具体实现如下：

const cacheAdapter = require('axios-cache-adapter');

const cache = cacheAdapter.getCacheAdapter();

const axiosWithCache = axios.create({
  adapter: cache.adapter
});

const request = axiosWithCache({
  url: 'https://example.com/api/v1/users',
  method: 'get',
  cache: {
    maxAge: 600000 // 缓存时间（毫秒）
  }
});