为了避免后端流控、崩溃等异常而无法访问的情况,就需要将接口和页面的静态资源缓存在用户的浏览器本地,这样一来,就算后端服务不可达,前端依旧能有正常的页面显示操作反馈,大部分用户无法感知到系统出现了故障.
这个虽然听起来高大上,其实就是前端服务和后端服务分开部署,这样一来是为了避免后端的服务崩溃掉后,前端web层的响应依旧正常.表现起来就是后端的接口无法响应,但是前端的index.html,js,css等静态资源依旧能够正常访问.
这样部署需要注意的就是配置转发,因为不同服务器前端直接访问后端会跨域.
这部分工作让后端同学完成即可.
这个老生常谈了,一般我们的前端项目,只有index.html响应头设置的cache-control是no-cache,其他的静态资源如图片,页面的js、css、字体文件都是设置的缓存,这个也是nginx上设置,让后端同学整.
这里简单讲下这样设置的原因:
index.html响应头设置的no-cache是为了每次浏览器刷新或者新打开,获取到的index.html都是最新的,这样一来就避免了发版之后,用户还是拿到旧的前端代码的情况.
其他静态资源设置缓存,是为了提高页面的响应速度,原来请求静态资源的路径是浏览器-后端,现在加了缓存就变成浏览器-缓存-后端,只有缓存失效或者不存在的时候,才会建立http链接来获取静态资源,设置缓存便节省了这部分时间.
这里实际上就两种情况:接口请求成功,写入(更新)缓存,正常展示页面;接口请求失败,拿缓存的数据正常展示页面.
假设用户常用的页面有首页和ABC四个页面,那么要是用户进入首页后,前端服务崩了,无法拿到其他页面的静态资源了,就会发生点击无法跳转的情况.
因为我们前端项目多数使用的spa单页面开发,利用的webpack进行打包,这就意味着我们每个页面通常是按需引入,用户才进入首页,是没有获取到另外三个ABC页面的js和css的,这就造成了无法跳转,点击没响应的情况.
为了避免这种情况的发生,就需要将这四个页面的代码单独抽离出来,打包成一个chunk,这样一来,无论访问到哪个页面,都能同步获取到另外三个页面的静态资源,在完全断网后,用户也能最低限度地在这四个页面正常操作.
这里主要讲后面两点前端接口的缓存和核心页面代码的打包
要让用户无感,也就是这些核心页面涉及的接口,可以设置一个需要缓存的接口白名单,
//离线缓存的接口
export const setCacheRequestList = [
{
REQUEST_TXCODE: 'TEST0047',
REQUEST_TYPE: 'NORMAL_REQUEST',
RESUTLT_FORMAT: { data: { list: [] } },
REMARK: '获取园区列表'
},
{
REQUEST_TXCODE: 'TEST0120',
REQUEST_TYPE: 'NORMAL_REQUEST',
RESUTLT_FORMAT: { data: { LOGIN_MSG: {} } },
REMARK: '获取首页信息接口'
},
]
紧接着,对于接口缓存的处理,必然是要在全局做(每个接口单独做会让代码变得很乱),为了不对页面上的业务代码造成修改,我们可以在axios的响应拦截器上做处理,以下为伪代码:
import { setCacheRequestList } from '@/config/whiteList.js';
import { HandleRequestCache } from '@/vue-use/useHandleRequestCache.js';//这个是我写的类,后续会讲
let requestCache = new HandleRequestCache(setCacheRequestList);
export default function request(options) {
return new Promise((resolve, reject) => {
// 创建axios实例
const service = axios.create({
baseURL: process.env.VUE_APP_baseUrl
});
// request拦截器
service.interceptors.request.use(
async config => {
//...请求拦截器处理
return config;
},
error => {
Promise.reject(error);
} //请求拦截器的报错处理
);
// 响应拦截器
service.interceptors.response.use(
res => {
//判断在缓存白名单中,则忽略报错读取缓存:其实就是将白名单中的接口返回,处理成只走resolve的数据
res = requestCache.handleResponse(res);
if (res.data.RESULT === 'N') {
reject(JSON.stringify(res.data));
} else {
resolve(res.data);
}
},
error => {
requestCache.handleResponseErr(error, (res, currentRequest) => {
//报错的处理
})
if (message == 'Network Error') {
message = '网络开小差了，请稍后重试';
} else if (message.includes('timeout')) {
message = '网络开小差了，请稍后重试';
} else if (message.includes('Request failed with status code')) {
message =
'网络开小差了，请稍后重试(' +
message.substr(message.length - 3) +
')';
}
Toast({
message: message,
type: 'error',
duration: 2 * 1000
});
return reject(error);
);
service(options);
});
}
主要就是这一行代码:
res = requestCache.handleResponse(res);
他的目的就是实现:白名单内的接口,若接口成功写入缓存,并且把接口的返回原路返回,接口失败,则读取缓存,没有缓存则读取接口默认配置,作为返回.
也就是经过这个方法处理,白名单内的接口,都是正常的响应了(正常后端返回/缓存读取/默认接口配置)
但是呢,对于web层的报错我们还没处理,比如503啦,403啦之类的.
这个就需要我们在响应拦截器的error回调函数中处理:
requestCache.handleResponseErr
这个类的具体代码如下:
//前端首页离线-将首页及部分接口缓存,不再报错处理
import storage from '@/vue-use/useStorage.js';
import common from '@/utils/common.js';
class HandleRequestCache {
constructor(cacheList = []) {
this.cacheList = cacheList;
this.resultFormat = {
data: { RESULT: 'Y', TRACEID: '10000', data: {} }
};
}
//把请求参数处理成对象
getUrlToObject(search) {
let obj = {};
if (search.indexOf('=') !== -1) {
let pArr = search.split('&');
pArr.forEach(e => {
let kv = e.split('=');
obj[kv[0]] = kv[1];
});
}
return obj;
}
//存储
setCache(TXCODE, val) {
let remark = this.cacheList.filter(el => el.REQUEST_TXCODE == TXCODE)[0]
.REMARK;
console.log(
`%c接口${TXCODE}:${remark}成功写入缓存`,
'background: lightblue; color: #000000'
);
let newRes = { data: val };
storage.setItem(TXCODE, newRes, 'local');
}
//获取缓存,需要做判空处理
getCache(TXCODE, pageCurrent) {
let remark = this.cacheList.filter(el => el.REQUEST_TXCODE == TXCODE)[0]
.REMARK;
console.log(
`%c接口${TXCODE}:${remark}成功读取缓存`,
'background: #222; color: #bada55'
);
let currentRequest = this.cacheList.filter(
item => item.REQUEST_TXCODE == TXCODE
);
let cache;
switch (currentRequest[0].REQUEST_TYPE) {
case 'NORMAL_REQUEST':
//普通接口
cache = storage.getItem(TXCODE, 'local')
? storage.getItem(TXCODE, 'local')
: '';
break;
case 'PAGE_REQUEST':
//分页接口只获取第一页,否则取默认
if (pageCurrent == '1') {
cache = storage.getItem(TXCODE, 'local')
? storage.getItem(TXCODE, 'local')
: '';
}
break;
default:
break;
}
//缓存-白名单配置-默认配置中谁有值就取谁
let newRes = !common.isEmptyData(cache)
? cache
: !common.isEmptyData(currentRequest[0].RESUTLT_FORMAT)
? currentRequest[0].RESUTLT_FORMAT
: this.resultFormat;
newRes.data['cache'] = true; //非正常接口获取
return newRes;
}
//处理接口返回
handleResponse(res) {
let { TXCODE, pageCurrent = 0 } = this.getUrlToObject(res.config.data);
const currentRequest = this.cacheList.filter(
el => el.REQUEST_TXCODE == TXCODE
);
if (currentRequest.length > 0 && res.data.RESULT == 'N') {
//失败的白名单接口读取缓存
return this.getCache(TXCODE, pageCurrent);
} else if (currentRequest.length > 0) {
//成功的白名单接口存缓存后原样返回
switch (currentRequest[0].REQUEST_TYPE) {
case 'NORMAL_REQUEST':
//普通接口
this.setCache(TXCODE, res.data);
break;
case 'PAGE_REQUEST':
//分页接口只存储第一页
if (pageCurrent == '1') {
this.setCache(TXCODE, res.data);
}
break;
default:
break;
}
}
return res;
}
//处理web层网络报错返回
handleResponseErr(err, cb) {
let { TXCODE, pageCurrent = 0 } = this.getUrlToObject(err.config.data);
const currentRequest = this.cacheList.filter(
el => el.REQUEST_TXCODE == TXCODE
);
let newRes;
if (currentRequest.length > 0) {
//失败的白名单接口读取缓存
newRes = this.getCache(TXCODE, pageCurrent);
}
cb(newRes, currentRequest);
}
}
export { HandleRequestCache };
这样一来,就做到了不动任何页面代码的情况,在项目中新增了接口离线的功能啦.
这一部分就是webpack的配置修改啦,在router中,我们按需引入页面的时候,使用webpack的魔法注释就可以啦:
const Home = () =>
import(/* webpackChunkName: "home-mine" */ '../views/home/index.vue');
const Mine = () =>
import(/* webpackChunkName: "home-mine" */ '../views/mine/mine.vue');
这样一来,home和mine页面的js,css都是放在名为home-mine的chunk中啦.