vue中使用基于客户端的缓存

在写基于express、vuejs博客的小项目过程中,折腾了下在vuejs中怎么使用浏览器缓存请求。

原理是利用vue-resource拦截器interceptor,判断当前请求是否存在localStorage里,有则返回缓存的内容;没有则请求服务器,并在localStorage写入缓存。

用到的依赖包:

详细代码在https://github.com/liukaijv/lnode-blog/tree/master/frontend

相关代码

vue入口文件main.js:

1
2
3
4
5
6
7
8
9
import Vue from 'vue';
import VueResource from 'vue-resource';
import Cache from 'lscache';
Vue.prototype.$cache = Cache;
Vue.cache = Cache;
import httpCache from './lib/cache';
httpCache(Vue);

缓存拦截器cache.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import _ from 'lodash';
export default function (Vue){
Vue.http.interceptors.push((request, next) => {
let cached, key, lifetime;
if(request.cache !== undefined && /^(GET|JSONP)$/i.test(request.method)) {
if (_.isObject(request.cache)) {
lifetime = request.cache.lifetime;
key = '_resource.' + request.cache.key;
} else {
lifetime = request.cache;
key = request.url;
}
// 不需要缓存的请求,添加参数no_cache=true
let no_cache = request.params.no_cache;
cached = Vue.cache.get(key);
if (cached && !no_cache) {
// 重写返回数据
request.client = function (request) {
return request.respondWith(cached.body, {ok: true, status:200});
};
}
}
next((response) => {
if (!cached && response.ok) {
Vue.cache.set(key, response, lifetime);
}
});
});
}

说明

关键点请求的client,返回数据{ok: true}必须有,这样才能正确返回数据。

1
2
3
request.client = function (request) {
return request.respondWith(cached.body, {ok: true, status:200});
};

具体请查看源码https://github.com/pagekit/vue-resource/blob/master/src/http/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
return client(new Request(options)).then((response) => {
// 原因在这里
return response.ok ? response : Promise.reject(response);
}, (response) => {
if (response instanceof Error) {
error(response);
}
return Promise.reject(response);
});