<>强业务场景
在不少业务场景下,我们需要实现简单的请求缓存(即某个请求只发起一次请求),例如上传牌的获取,获取配置的接口等。
这些接口可以通过承诺实现简单的缓存并能够控制更新,而不需要另外引入缓存层。
<强>示范代码
用七牛上传作例子,一般我们会把七牛上传封装为一个单独的上传组件,外部只需要调用组件,而令牌的获取封装到组件内部实现。
//Upload.vue
让fetchToken=零;
出口默认{
数据(){
返回{
令牌:“
};
},
方法:{
异步上传(){
尝试{//?
}
抓住(err) {
警报(err.message);
this.refreshToken ();
}
},
refreshToken () {
fetchToken=零;
this.fetchToken ();
},
fetchToken () {
如果(! fetchToken) {
fetchToken=request.get ('/api/qiniu/令牌');
}
尝试{
这一点。令牌=等待fetchToken;
}
抓住(err) {
console.error(错);
}
}
},
创建(){
this.fetchToken ();
}
};
之前
上面是一个简单的缓存上传牌的例子,并且会在上传失败时刷新令牌。
<强>与直接缓存令牌的值比较,缓存请求有什么好处?
//缓存值的代码
出口默认{
方法:{
fetchToken () {
如果(! fetchToken) {
fetchToken=等待request.get ('/api/qiniu/令牌');
}
尝试{
这一点。令牌=fetchToken;
}
抓住(err) {
console.error(错);
}
}
}
}
之前
一个比较常见的上传组件的应用场景,在一个页面里同时使用多次该组件。
& lt; template>
& lt; div类=" upload1 "祝辞& lt;上传/祝辞& lt;/div>
& lt; div类=" upload2 "祝辞& lt;上传/祝辞& lt;/div>
& lt;/template>
之前
就上面的代码例子,如果使用缓存值的方法,那么页面一打开就会请求两次获取令牌接口。
<强>继续完善上传组件
//Upload.vue
让fetchToken=零;
出口默认{
方法:{
异步上传(){
尝试{
this.fetchToken ();
const牌=等待fetchToken;//?
}捕捉(err) {
警报(err.message);
this.refreshToken ();
}
},
refreshToken () {
fetchToken=零;
this.fetchToken ();
},
fetchToken () {
如果(! fetchToken) {
fetchToken=request.get ('/api/qiniu/令牌');
}
}
},
创建(){
this.fetchToken ();
}
};
之前
为了防止多个上传组件令牌不同步问题,不再通过这个。令牌保存牌,而是每次都等待fetchToken解决,保证获取到的令牌一定是最新的。
当然,这里还有很多需要优化,例如失败后的重试,判断是401失败才刷新令牌,设置错误时间,定时刷新等等,但总体思路就是上面代码所展示的内容。
<强>另外再介绍一个经典应用场景
const fetchConfig=(()=比;{
让configRequest=零;
返回()=比;{
如果(! configRequest) {
configRequest=Promise.all ([services.customer。config1 services.customer.config2])
不要犹豫(((data1、data2))=比;{
返回{data1、data2};
}）
.catch(呃=比;{
configRequest=零;
返回Promise.reject (err);
});
}
返回configRequest;
};
})();
出口默认{
异步beforeRouteEnter(下),从{
尝试{//配置信息仅需要成功请求一次
常量(数据、配置)=等待Promise.all ([services.customer.getInfo (), fetchConfig ()));
下(vm=比;{
vm。数据=https://www.yisu.com/zixun/data;
vm。配置=配置;
vm.init ();
};
}捕捉(err) {
下一个(错);
}
}
};
之前
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
