我们一起聊聊前端接口容灾

开篇

你说，万一接口挂了会怎么样？MKy28资讯网——每日最新资讯28at.com

还能咋样，白屏呗。MKy28资讯网——每日最新资讯28at.com

有没有不白屏的方案？MKy28资讯网——每日最新资讯28at.com

有啊，还挺简单的。MKy28资讯网——每日最新资讯28at.com

容我细细细细分析。MKy28资讯网——每日最新资讯28at.com

原因就是接口挂了，拿不到数据了。那把数据储存起来就可以解决问题。MKy28资讯网——每日最新资讯28at.com

思考

存哪里?

第一时间反应浏览器本地存储，想起了四兄弟。MKy28资讯网——每日最新资讯28at.com

选型对比

考虑到需要存储的数据量，5MB 一定不够的，所以选择了 IndexDB。MKy28资讯网——每日最新资讯28at.com

考虑新用户或者长时间未访问老用户，会取不到缓存数据与陈旧的数据。MKy28资讯网——每日最新资讯28at.com

因此准备上云，用阿里云存储，用 CDN 来保障。MKy28资讯网——每日最新资讯28at.com

总结下：线上 CDN、线下 IndexDB。MKy28资讯网——每日最新资讯28at.com

整体方案

整体流程图

图片MKy28资讯网——每日最新资讯28at.com

CDN

先讲讲线上 CDN。MKy28资讯网——每日最新资讯28at.com

通常情况下可以让后端支撑，本质就是更新策略问题，这里不细说。MKy28资讯网——每日最新资讯28at.com

我们讲讲另外一种方案，单独启个 Node 服务更新 CDN 数据。MKy28资讯网——每日最新资讯28at.com

流程图

图片MKy28资讯网——每日最新资讯28at.com

劫持逻辑

劫持所有接口，判断接口状态与缓存标识。从而进行更新数据、获取数据、缓存策略三种操作MKy28资讯网——每日最新资讯28at.com

通过配置白名单来控制接口存与取MKy28资讯网——每日最新资讯28at.com

axios.interceptors.response.use(      async (resp) => {        const { config } = resp        const { url } = config        // 是否有缓存tag，用于更新CDN数据。目前是定时服务在跑，访问页面带上tag        if (this.hasCdnTag() && this.isWhiteApi(url)) {          this.updateCDN(config, resp)        }        return resp;      },      async (err) => {        const { config } = err        const { 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)          })        }      }    );

缓存策略

累计接口异常发生 maxCount 次，打开缓存开关，expiresSeconds 秒后关闭。MKy28资讯网——每日最新资讯28at.com

缓存开关用避免网络波动导致命中缓存，设置了阀值。MKy28资讯网——每日最新资讯28at.com

/** 缓存策略*/useCache = () => {  if (this.expiresStamp > +new Date()) {    const d = new Date(this.expiresStamp)    console.warn(`    ---------------------------------------    ---------------------------------------    启用缓存中    关闭时间：${d.getHours()}:${d.getMinutes()}:${d.getSeconds()}    ---------------------------------------    ---------------------------------------    `)    return true  }  this.errorCount += 1  localStorage.setItem(CACHE_ERROR_COUNT_KEY, `${this.errorCount}`)  if (this.errorCount > this.maxCount) {    this.expiresStamp = +new Date() + this.expiresSeconds * 1000    this.errorCount = 0    localStorage.setItem(CACHE_EXPIRES_KEY, `${this.expiresStamp}`)    localStorage.removeItem(CACHE_ERROR_COUNT_KEY)    return true  }  return false}

唯一标识

根据 method、url、data 三者来标识接口，保证接口的唯一性MKy28资讯网——每日最新资讯28at.com

带动态标识，譬如时间戳等可以手动过滤MKy28资讯网——每日最新资讯28at.com

/** * 生成接口唯一键值*/generateCacheKey = (config) => {  // 请求方式，参数，请求地址，  const { method, url, data, params } = config;  let rawData = ''  if (method === 'get') {    rawData = params  }  if (method === 'post') {    rawData = JSON.parse(data)  }  // 返回拼接key  return `${encodeURIComponent([method, url, stringify(rawData)].join('_'))}.json`;};

更新数据

/** * 更新cdn缓存数据*/updateCDN = (config, data) => {  const fileName = this.generateCacheKey(config)  const cdnUrl = `${this.prefix}/${fileName}`  axios.post(`${this.nodeDomain}/cdn/update`, {    cdnUrl,    data  })}

Node定时任务

构建定时任务，用 puppeteer 去访问、带上缓存标识，去更新 CDN 数据MKy28资讯网——每日最新资讯28at.com

import schedule from 'node-schedule';const scheduleJob = {};export const xxxJob = (ctx) => {  const { xxx } = ctx.config;  ctx.logger.info(xxx, 'xxx');  const { key, url, rule } = xxx;  if (scheduleJob[key]) {    scheduleJob[key].cancel();  }  scheduleJob[key] = schedule.scheduleJob(rule, async () => {    ctx.logger.info(url, new Date());    await browserIndex(ctx, url);  });};export const browserIndex = async (ctx, domain) => {  ctx.logger.info('browser --start', domain);  if (!domain) {    ctx.logger.error('domain为空');    return false;  }  const browser = await puppeteer.launch({    args: [      '--use-gl=egl',      '--disable-gpu',      '--no-sandbox',      '--disable-setuid-sandbox',    ],    executablePath: process.env.CHROMIUM_PATH,    headless: true,    timeout: 0,  });  const page = await browser.newPage();  await page.goto(`${domain}?${URL_CACHE_KEY}`);  await sleep(10000);  // 访问首页所有查询接口  const list = await page.$$('.po-tabs__item');  if (list?.length) {    for (let i = 0; i < list.length; i++) {      await list[i].click();    }  }  await browser.close();  ctx.logger.info('browser --finish', domain);  return true;};

效果

手动 block 整个 domain，整个页面正常展示MKy28资讯网——每日最新资讯28at.com

图片MKy28资讯网——每日最新资讯28at.com

IndexDB

线上有 CDN 保证了，线下就轮到 IndexDB 了，基于业务简单的增删改查，选用 localForage 三方库足矣。MKy28资讯网——每日最新资讯28at.com

axios.interceptors.response.use(      async (resp) => {        const { config } = resp        const { url } = config        // 是否有缓存tag，用于更新CDN数据。目前是定时服务在跑，访问页面带上tag        if (this.hasCdnTag() && this.isWhiteApi(url)) {          this.updateCDN(config, resp)        }        if(this.isIndexDBWhiteApi(url)){          this.updateIndexDB(config, resp)        }        return resp;      },      async (err) => {        const { config } = err        const { 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 浏览器。MKy28资讯网——每日最新资讯28at.com

接口容灾我们也是刚弄不久，有许多细节与不足，欢迎沟通交流。MKy28资讯网——每日最新资讯28at.com

接口容灾本意是预防发生接口服务挂了的场景，我们不会很被动。原来是P0的故障，能被它降低为 P2、P3，甚至在某些场景下都不会有用户反馈。MKy28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-35314-0.html我们一起聊聊前端接口容灾

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： Vue 3的Teleport特性详解，你了解几分？

下一篇： 2024 年 Vue 发展预测