如何借助axios-cache-interceptor强制Axios返回缓存响应？

要强制Axios返回缓存响应，核心是利用axios-cache-interceptor提供的force缓存配置项，它能让请求直接读取已有缓存数据，跳过网络请求（即便缓存已过期）。以下是两种实现方式：

单个请求强制使用缓存 #

在特定请求的配置中添加cache.force: true，仅对该请求生效：

import axios from 'axios'
import { setupCache } from 'axios-cache-interceptor'

const axiosInstance = axios.create({
  timeout: 60 * 1000 // 1分钟超时
})

export const httpClient = setupCache(axiosInstance)

// 强制返回缓存的请求
httpClient.get('https://example-api.dev', {
  cache: {
    force: true // 开启强制缓存模式
  }
})

全局默认强制使用缓存 #

如果需要所有请求都默认强制读取缓存，可以在初始化缓存时全局配置defaults.force: true：

import axios from 'axios'
import { setupCache } from 'axios-cache-interceptor'

const axiosInstance = axios.create({
  timeout: 60 * 1000 // 1分钟超时
})

// 全局配置默认强制使用缓存
export const httpClient = setupCache(axiosInstance, {
  defaults: {
    force: true
  }
})

// 此时所有请求都会优先读取缓存
httpClient.get('https://example-api.dev')

注意：如果目标请求尚未生成缓存数据，即使开启force选项，依然会发起网络请求并缓存返回结果。

内容的提问来源于stack exchange，提问作者rafis