✨feat: 添加13.2.2_超时与Error组件

Author: cycleccc

第13章异步组件与函数式组件/12.2_异步组件的实现原理/13.2.2_超时与Error组件.html

@@ -80,9 +80,7 @@
 
             // defineAsyncComponent 函数用于定义一个异步组件，接收一个异步组件加载器作为参数
             function defineAsyncComponent (options) {
-                // options 可以是配置项，也可以是加载器
                 if (typeof options === 'function') {
-                    // 如果 options 是加载器，则将其格式化为配置项形式
                     options = {
                         loader: options
                     }
@@ -91,24 +89,42 @@
                 const { loader } = options
 
                 let InnerComp = null
-                // 返回一个包装组件
+
                 return {
                     name: 'AsyncComponentWrapper',
                     setup () {
-                        // 异步组件是否加载成功
                         const loaded = ref(false)
-                        // 代表是否超时，默认为 false，既没有超时
-                        const timeout = ref(false)
-                        // 执行加载器函数，返回一个 Promise 实例
-                        // 加载成功后，将加载成功的组件赋值给 InnerComp，并将 loaded 标记为 true，代表加载成功
-                        loader().then(c => {
-                            InnerComp = c
-                            loaded.value = true
-                        })
+                        // 定义 error，当错误发生时，用来存储错误对象
+                        const error = shallowRef(null)
+
+                        loader()
+                            .then(c => {
+                                InnerComp = c
+                                loaded.value = true
+                            })
+                            // 添加 catch 语句来捕获加载过程中的错误
+                            .catch((err) => error.value = err)
+
+                        let timer = null
+                        if (options.timeout) {
+                            timer = setTimeout(() => {
+                                // 超时后创建一个错误对象，并复制给 error.value
+                                const err = new Error(`Async component timed out after ${ options.timeout }ms.`)
+                                error.value = err
+                            }, options.timeout)
+                        }
+
+                        const placeholder = { type: Text, children: '' }
 
                         return () => {
-                            // 如果异步组件加载成功，则渲染该组件，否则渲染一个占位内容
-                            return loaded.value ? { type: InnerComp } : { type: Text, children: '' }
+                            if (loaded.value) {
+                                return { type: InnerComp }
+                            } else if (error.value && options.errorComponent) {
+                                // 只有当错误存在且用户配置了 errorComponent 时才展示 Error 组件，同时将 error 作为 props 传递
+                                return { type: options.errorComponent, props: { error: error.value } }
+                            } else {
+                                return placeholder
+                            }
                         }
                     }
                 }