简易版前端项目离线方案-接口及页面离线缓存

2026/9/28 20:01:05 拓冰建站浏览量

一,要实现的目标

为了避免后端流控、崩溃等异常而无法访问的情况,就需要将接口和页面的静态资源缓存在用户的浏览器本地,这样一来,就算后端服务不可达,前端依旧能有正常的页面显示操作反馈,大部分用户无法感知到系统出现了故障.

二,方案的设计

2.1,前端单独集群部署

这个虽然听起来高大上,其实就是前端服务和后端服务分开部署,这样一来是为了避免后端的服务崩溃掉后,前端web层的响应依旧正常.表现起来就是后端的接口无法响应,但是前端的index.html,js,css等静态资源依旧能够正常访问.
这样部署需要注意的就是配置转发,因为不同服务器前端直接访问后端会跨域.
这部分工作让后端同学完成即可.

2.2,前端页面的缓存设置

这个老生常谈了,一般我们的前端项目,只有index.html响应头设置的cache-control是no-cache,其他的静态资源如图片,页面的js、css、字体文件都是设置的缓存,这个也是nginx上设置,让后端同学整.
这里简单讲下这样设置的原因:

index.html响应头设置的no-cache是为了每次浏览器刷新或者新打开,获取到的index.html都是最新的,这样一来就避免了发版之后,用户还是拿到旧的前端代码的情况.

其他静态资源设置缓存,是为了提高页面的响应速度,原来请求静态资源的路径是浏览器-后端,现在加了缓存就变成浏览器-缓存-后端,只有缓存失效或者不存在的时候,才会建立http链接来获取静态资源,设置缓存便节省了这部分时间.

2.3,前端接口的缓存

这里实际上就两种情况:接口请求成功,写入(更新)缓存,正常展示页面;接口请求失败,拿缓存的数据正常展示页面.

2.4,核心页面的代码合并

假设用户常用的页面有首页和ABC四个页面,那么要是用户进入首页后,前端服务崩了,无法拿到其他页面的静态资源了,就会发生点击无法跳转的情况.
因为我们前端项目多数使用的spa单页面开发,利用的webpack进行打包,这就意味着我们每个页面通常是按需引入,用户才进入首页,是没有获取到另外三个ABC页面的js和css的,这就造成了无法跳转,点击没响应的情况.
为了避免这种情况的发生,就需要将这四个页面的代码单独抽离出来,打包成一个chunk,这样一来,无论访问到哪个页面,都能同步获取到另外三个页面的静态资源,在完全断网后,用户也能最低限度地在这四个页面正常操作.

三,具体的实现

这里主要讲后面两点前端接口的缓存和核心页面代码的打包

3.1,前端接口的缓存

要让用户无感,也就是这些核心页面涉及的接口,可以设置一个需要缓存的接口白名单,

接口名用REQUEST_TXCODE存储,
需要我们手动地拦截错误,不再toast报错给用户看,另外为了避免接口没返回,且没有接口缓存的情况,就需要设置每个接口个性化的返回,来防止页面代码报错(如接口处理res.list.map,如果list不存在的话,会报错list.map is not a function).所以新增RESUTLT_FORMAT字段.
又因为有的是分页接口(只需缓存第一页),所以新增属性REQUEST_TYPE
REMARK是为了让开发者好阅读维护代码加的备注

//离线缓存的接口
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 };

这样一来,就做到了不动任何页面代码的情况,在项目中新增了接口离线的功能啦.

3.2,核心页面的打包

这一部分就是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中啦.

建站实战干货