Axios网络请求优化（缓存）

合理使用缓存，避免重复请求

// 通过缓存机制，存储已经发出的请求结果，如果同样的请求再次发起， // 直接从缓存中获取数据，而不是重新发请求。 import axios from "axios"; // 缓存对象 const cache = new Map<string, any>(); // 封装带缓存的请求函数 async function axiosWithCache(url: string): Promise<any> { if (cache.has(url)) { console.log(`从缓存中获取数据: ${url}`); return cache.get(url); } console.log(`发送网络请求: ${url}`); const response = await axios.get(url); // 将结果存入缓存 cache.set(url, response.data); return response.data; } // 使用示例 (async () => { const url = "https://jsonplaceholder.typicode.com/todos/1"; const result1 = await axiosWithCache(url); // 第一次请求 console.log(result1); const result2 = await axiosWithCache(url); // 从缓存获取 console.log(result2); })();

使用 abortController 取消不再需要的请求。

// 当用户离开页面或切换视图时，取消掉未完成的请求以节省资源。 // 封装请求函数，支持 AbortController import axios from "axios"; // 封装带取消功能的请求函数 async function axiosWithAbort(url: string, controller: AbortController): Promise<any> { try { const response = await axios.get(url, { signal: controller.signal, // 绑定 AbortController 的 signal }); return response.data; } catch (error: any) { if (axios.isCancel(error)) { console.log(`请求已取消: ${url}`); } else { console.error("请求失败", error); } throw error; } } // 使用示例 (async () => { const controller = new AbortController(); const url = "https://jsonplaceholder.typicode.com/todos/1"; // 模拟请求 const fetchPromise = axiosWithAbort(url, controller); // 模拟用户取消请求 setTimeout(() => { controller.abort(); // 取消请求 }, 100); try { const result = await fetchPromise; console.log(result); } catch (error) { console.log("请求未完成，已被取消"); } })();