路由组件重加载

因为公司网络较差的原因，很多内部系统懒加载 chunk.js 是时常会失败，在了解到 react-router 可异步引入 路由组件后，写了一个函数，该函数可在加载失败后持续加载，其重试次数和间隔时间可配置，默认加载次数上限为5次，间隔为2s。

export const retry = (fn, { retriesNum = 5, interval = 2000 } = {}) => {
  return new Promise((resolve, reject) => {
    fn()
      .then(resolve)
      .catch(error => {
       // 失败后如果重试次数大于1，继续执行 retry 函数
        setTimeout(() => {
          if (retriesNum === 1) {
            reject(error)
            return
          }
          retry(fn, retriesNum - 1, interval).then(resolve, reject)
        }, interval)
      })
  })
}

// 这种方法是不加 chunkName 可以使用,如果加chunkName
export const lazyAndRetry = (comp, retryOpt = { retriesNum: 5, interval: 2000 }) =>
  lazy(() => retry(() => import(comp), retryOpt))
  
  // 使用
  import { retry } from '@/utils'
  
  [
      {
        root: false,
        auth: true,
        path: '/aa',
        component: retry(() => import(/* webpackChunkName: "aa" */ '../aa.tsx')
        ),
        key: 'aa'
      },
      ...otherRoutes
    ]