我们一起聊聊前端接口容灾( 二 ) _前端接口

效果手动 block 整个 domain ，整个页面正常展示

文章插图
图片
IndexDB线上有 CDN 保证了，线下就轮到 IndexDB 了，基于业务简单的增删改查，选用 localForage 三方库足矣。

axios.interceptors.response.use(async (resp) => {const { config } = respconst { url } = config// 是否有缓存tag，用于更新CDN数据 。目前是定时服务在跑，访问页面带上tagif (this.hasCdnTag() && this.isWhiteApi(url)) {this.updateCDN(config, resp)}if(this.isIndexDBWhiteApi(url)){this.updateIndexDB(config, resp)}return resp;},async (err) => {const { config } = errconst { url } = config// 是否命中缓存策略if (this.isWhiteApi(url) && this.useCache()) {return this.fetchCDN(config).then(res => {pushLog(`cdn缓存数据已命中，请处理`, SentryTypeEnum.error)return res}).catch(()=>{pushLog(`cdn缓存数据未同步，请处理`, SentryTypeEnum.error)if(this.isIndexDBWhiteApi(url)){return this.fetchIndexDB(config).then(res => {pushLog(`IndexDB缓存数据已命中，请处理`, SentryTypeEnum.error)return res}).catch(()=>{pushLog(`IndexDB缓存数据未同步，请处理`, SentryTypeEnum.error)})}})}});

总结总结下，优点包括不入侵业务代码，不影响现有业务，随上随用，尽可能避免前端纯白屏的场景，成本低。劣势包括使用局限，不适合对数据实效性比较高的业务场景，不支持 IE 浏览器。
接口容灾我们也是刚弄不久，有许多细节与不足，欢迎沟通交流。
接口容灾本意是预防发生接口服务挂了的场景，我们不会很被动。原来是P0的故障，能被它降低为 P2、P3，甚至在某些场景下都不会有用户反馈。