如何在最小改动现有代码的前提下缓存Axios API响应？

不需要引入额外依赖，直接用内存对象实现缓存，对你现有代码的改动极小：

import axios from 'axios';

// 新增内存缓存对象，用邮编作为键
const cache = {};

export const getAreaData = async (postcode) => {
    // 先检查缓存，存在直接返回
    if (cache[postcode]) {
        return cache[postcode];
    }
    // 原请求逻辑完全保留
    const { data } = await axios.get(`https://api.zippopotam.us/GB/${postcode}`);
    // 把结果存入缓存
    cache[postcode] = data.places;
    return data.places;
};

可选扩展：持久化缓存 #

如果需要页面刷新后仍保留缓存，可改用localStorage实现，改动同样很小：

import axios from 'axios';

export const getAreaData = async (postcode) => {
    const cacheKey = `area_data_${postcode}`;
    // 读取本地缓存
    const cachedData = localStorage.getItem(cacheKey);
    if (cachedData) {
        return JSON.parse(cachedData);
    }
    // 原请求逻辑不变
    const { data } = await axios.get(`https://api.zippopotam.us/GB/${postcode}`);
    // 存入本地缓存
    localStorage.setItem(cacheKey, JSON.stringify(data.places));
    return data.places;
};

两种方案都仅在原函数基础上添加了缓存检查和写入逻辑，完全保留了你原本的请求流程。

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