5月29日 22:54
axios 性能优化有哪些技巧?如何减少冗余请求?
axios 性能优化围绕 请求去重、缓存、并发控制、体积优化 四个维度。
请求去重: 对同一接口的并发请求做合并,避免重复发送。实现方式:在请求拦截器中用 URL+参数生成 key,维护一个 Map 记录正在进行的请求,相同 key 的请求复用同一个 Promise,响应后删除 key。也叫"请求锁"或"请求合并"。
请求缓存: 对不常变的数据(配置信息、字典表)做本地缓存。在响应拦截器中按 URL+参数缓存响应,设置 TTL 过期。也可用 HTTP 缓存头(Cache-Control、ETag)配合浏览器缓存,axios 的 adapter 可实现自定义缓存适配器。
并发控制: 使用 Promise.all 并发请求提升加载速度;对大量并发用并发池控制(如 p-limit),避免浏览器同域 6 连接限制导致的排队。批量接口优先用后端聚合 API,减少请求次数。
体积优化: 开启 gzip 压缩(服务端配置);请求参数精简,只传必要字段;响应数据按需获取(分页、字段过滤);大文件上传用分片上传减少超时风险。
追问:
- 请求去重的 Map 在请求失败时如何清理?避免后续请求被阻塞?
- 自定义缓存 adapter 如何处理 POST 请求的缓存策略?
- 浏览器同域并发连接限制对 axios 有什么影响?如何绕过?
- 如何实现 axios 请求的优先级队列?
- 分片上传的断点续传如何在 axios 中实现?