axios二次封装怎么配置缓存
时间: 2023-09-19 16:09:00 浏览: 57
对于axios的二次封装,可以利用axios自带的interceptors拦截器来实现缓存功能。
具体实现步骤如下:
1. 创建一个axios实例,配置请求和响应拦截器:
```javascript
import axios from 'axios'
const instance = axios.create({
baseURL: 'https://example.com/api',
timeout: 5000
})
// 请求拦截器
instance.interceptors.request.use(config => {
// 在请求之前判断是否有缓存
const cacheData = sessionStorage.getItem(config.url)
if (cacheData) {
return JSON.parse(cacheData)
}
return config
}, error => {
return Promise.reject(error)
})
// 响应拦截器
instance.interceptors.response.use(response => {
// 在响应之后将数据缓存到sessionStorage中
sessionStorage.setItem(response.config.url, JSON.stringify(response.data))
return response
}, error => {
return Promise.reject(error)
})
export default instance
```
2. 在请求时判断缓存是否存在:
```javascript
import instance from './axios'
instance.get('/user').then(response => {
console.log(response.data)
})
```
这样,在第一次请求时会从服务器获取数据并缓存到sessionStorage中,在后续请求时会直接从缓存中获取数据,从而提高页面加载速度和减轻服务器压力。