虽然说天天看到各种面试题后端返还1w条数据的情况，我觉得会有这种场景吗，这次终于让我遇到了
因为需要把整段数据全部给计算好，分页返还相对麻烦，一次返还方便计算，于是乎分页任务就留给前端
解决思路
实际上解决方式根据不同场景有不同方案，如果我一个个页面去修改那么总共有100来个页面需要进行修改，那样耗时费力，于是乎在axios拦截器层面进行修改成为了最优解
1.初使思路
刚开始想着做一层缓存，第一次查询写入到map里面，后续查询在拦截器层面进行响应取消，后拿取map里面的数据返回出去
const service = axios.create({
timeout: 10000,
})
const map = new Map()
// request拦截器
service.interceptors.request.use(
(config) => {
//添加拦截器
const abort = new AbortController()
config.signal = abort.signal
if(针对想要缓存的接口判断){
const cache = map.get(存入的id)
if(cache){
abortController.abort()
return cache
}
}
return config
},
(error) => {
console.log(error)
Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
(res) => {
return res.data
}
},
(error) => {
if (针对想要缓存的接口判断) {
map.set(`${res.config.method}-${res.config.url}`, res)
}
return Promise.reject(error)
}
)
该方案确实能做到拦截请求与缓存数据，但拦截请求走的是response拦截器的err函数，这一点上并不符合需求
正确方式
在axios中有个adapter属性，这是自定义请求方式。总所周知，axios在浏览器上底层是基于xhr，node是http 具体代码是在axios库当中的./lib/adapters
这也意味着你可以自定义使用fetch发送请求以满足需求。
具体封装思路就变为查询到mao缓存就不发请求，查询不到就发起请求。那是否意味着我们需要在写一遍xhr呢？
不需要，axios有个axios.defaults.adapter，这就可直接发送请求，于是代码就是
const service = axios.create({
timeout: 10000,
adapter: customAdapter(axios.defaults.adapter),
})
const map = new Map()
function customAdapter(adapter) {
return (config) => {
const cache = map.get(`${config.method}-${config.url}`)
if (判断走缓存) {
console.log(config)
console.log(cache)
return Promise.resolve(cache)
}
//走请求
return adapter(config)
}
}
详情可查看./lib/adapters/README.md文档
这样既可满足需要
