【vue-router源码】十、isReady源码解析

【vue-rouer源码】系列文章

1. 【vue-router源码】一、router.install解析
2. 【vue-router源码】二、createWebHistory、createWebHashHistory、createMemoryHistory源码解析
3. 【vue-router源码】三、理解Vue-router中的Matcher
4. 【vue-router源码】四、createRouter源码解析
5. 【vue-router源码】五、router.addRoute、router.removeRoute、router.hasRoute、router.getRoutes源码分析
6. 【vue-router源码】六、router.resolve源码解析
7. 【vue-router源码】七、router.push、router.replace源码解析
8. 【vue-router源码】八、router.go、router.back、router.forward源码解析
9. 【vue-router源码】九、全局导航守卫的实现
10. 【vue-router源码】十、isReady源码解析
11. 【vue-router源码】十一、onBeforeRouteLeave、onBeforeRouteUpdate源码分析
12. 【vue-router源码】十二、useRoute、useRouter、useLink源码分析
13. 【vue-router源码】十三、RouterLink源码分析
14. 【vue-router源码】十四、RouterView源码分析

---

---

前言

【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。该系列文章源码参考vue-router v4.0.15。
源码地址：https://github.com/vuejs/router
阅读该文章的前提是你最好了解vue-router的基本使用，如果你没有使用过的话，可通过vue-router官网学习下。

该篇文章将分析isReady的实现。

使用

router.isReady()
  .then(() => {
    // 成功
  })
  .catch(() => {
    // 失败
  })

isReady

isReady不接受任何参数。如果路由器已经完成了初始化导航，那么会立即解析Promise，相反如果还没有完成初始化导航，那么会将resolve和reject放入一个数组中，并添加到一个列表中，等待初始化导航完成进行触发。

let readyHandlers = useCallbacks<OnReadyCallback>()

function isReady(): Promise<void> {
  // ready为true并且当前路由不是初始路由，导航已经初始化完毕，立即解析promise
  if (ready && currentRoute.value !== START_LOCATION_NORMALIZED)
    return Promise.resolve()
  // 相反，会将resolve、reject存入一个列表
  return new Promise((resolve, reject) => {
    readyHandlers.add([resolve, reject])
  })
}

在之前解析的push过程中，无论过程中是否有错误信息，都会执行一个markAsReady函数。在markAsReady中会将isReady处理函数进行触发，触发完毕后，会将列表清空。

function markAsReady<E = any>(err?: E): E | void {
  if (!ready) {
    // 如果存在err，说明还未准备好，如果不存在err，那么说明初始化导航已经完成，ready变为true，之后就不会再进入这个分支
    ready = !err
    // 设置popstate监听函数
    setupListeners()
    // 触发ready处理函数，有错误执行reject(err)，没有执行resolve()
    readyHandlers
      .list()
      .forEach(([resolve, reject]) => (err ? reject(err) : resolve()))
    // 执行完，清空列表
    readyHandlers.reset()
  }
  return err
}