js使用Promise实现简单的Ajax缓存

2023-09-05 18:52:04 69

业务场景

在不少业务场景下，我们需要实现简单的请求缓存(即某个请求只发起一次请求)，例如上传Token的获取、获取配置的接口等。

这些接口可以通过Promise实现简单的缓存并能够控制更新，而不需要另外引入缓存层。

示范代码

用七牛上传作例子，一般我们会把七牛上传封装为一个单独的Upload组件，外部只需要调用组件，而token的获取封装到组件内部实现。

//Upload.vue
letfetchToken=null;
exportdefault{
data(){
return{
token:''
};
},
methods:{
asyncupload(){
try{
//...
}
catch(err){
alert(err.message);
this.refreshToken();
}
},
refreshToken(){
fetchToken=null;
this.fetchToken();
},
fetchToken(){
if(!fetchToken){
fetchToken=request.get('/api/qiniu/token');
}
try{
this.token=awaitfetchToken;
}
catch(err){
console.error(err);
}
}
},
created(){
this.fetchToken();
}
};

上面是一个简单的缓存上传token的例子，并且会在上传失败时刷新token。

与直接缓存Token的值比较，缓存请求有什么好处？

//缓存值的代码
exportdefault{
methods:{
fetchToken(){
if(!fetchToken){
fetchToken=awaitrequest.get('/api/qiniu/token');
}
try{
this.token=fetchToken;
}
catch(err){
console.error(err);
}
}
}
}

一个比较常见的Upload组件的应用场景，在一个页面里同时使用多次该组件。

就上面的代码例子，如果使用缓存值的方法，那么页面一打开就会请求两次获取Token接口。

继续完善Upload组件

//Upload.vue
letfetchToken=null;
exportdefault{
methods:{
asyncupload(){
try{
this.fetchToken();
consttoken=awaitfetchToken;
//...
}catch(err){
alert(err.message);
this.refreshToken();
}
},
refreshToken(){
fetchToken=null;
this.fetchToken();
},
fetchToken(){
if(!fetchToken){
fetchToken=request.get('/api/qiniu/token');
}
}
},
created(){
this.fetchToken();
}
};

为了防止多个Upload组件token不同步问题，不再通过this.token保存token，而是每次都等待fetchTokenresolved，保证获取到的token一定是最新的。

当然，这里还有很多需要优化，例如失败后的重试、判断是401失败才刷新token、设置错误时间、定时刷新等等，但总体思路就是上面代码所展示的内容。

另外再介绍一个经典应用场景

constfetchConfig=(()=>{
letconfigRequest=null;
return()=>{
if(!configRequest){
configRequest=Promise.all([services.customer.config1,services.customer.config2])
.then(([data1,data2])=>{
return{data1,data2};
})
.catch(err=>{
configRequest=null;
returnPromise.reject(err);
});
}
returnconfigRequest;
};
})();

exportdefault{
asyncbeforeRouteEnter(to,from,next){
try{
//配置信息仅需要成功请求一次
const[data,config]=awaitPromise.all([services.customer.getInfo(),fetchConfig()]);
next(vm=>{
vm.data=data;
vm.config=config;
vm.init();
};
}catch(err){
next(err);
}
}
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

js使用Promise实现简单的Ajax缓存

热门推荐

随机推荐