Ajax 解决浏览器缓存问题

Ajax 解决浏览器缓存问题

补充：浏览器出于性能考虑，对 GET 请求的相同 URL 会使用缓存，导致 Ajax 请求拿到的不是最新的数据。常见的几种解决思路：

1. 加随机参数（最常用）

让每次请求的 URL 都不同，强制浏览器认为是新请求：

xhr.open('GET', '/api/list?nowtime=' + new Date().getTime(), true);

也可以用随机数、随机字符串或哈希：

xhr.open('GET', '/api/list?_=' + Math.random(), true);

2. 服务端禁用缓存

在服务端设置响应头，禁止浏览器缓存该接口：

Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

3. 客户端禁用缓存

在发送 XMLHttpRequest 前设置：

xhr.setRequestHeader('Cache-Control', 'no-cache');
xhr.setRequestHeader('Pragma', 'no-cache');

4. 使用 POST 而非 GET

xhr.open('POST', '/api/list', true);

注意：POST 在某些实现下也不会被缓存，但严格来说 HTTP 规范要求 POST 也可能缓存，应当配合服务端响应头一起处理。

来源整理自：vue3js.cn 面试官系列