传递工厂函数作为参数
defineasynccomponent方法接收一个工厂函数是它的基本用法,这个工厂函数必须返回一个promise,promise的resolve应该返回一个组件。
我们这里以Vue Cli创建的项目为例,这里我稍微做了一下修改,将头部的图片拆分为一个组件,代码如下:
现在我们就将组件修改为异步组件,示例代码如下:
我们这里为了看到效果,将import延迟执行,示例代码如下:
当2s后才会加载组件。
立即学习“前端免费学习笔记(深入)”;
传递对象类型作为参数
defineAsyncComponent方法也可以接收一个对象作为参数,该对象中有如下几个参数:
loader:同工厂函数;loadingComponent:加载异步组件时展示的组件;errorComponent:加载组件失败时展示的组件;delay:显示loadingComponent之前的延迟时间,单位毫秒,默认200毫秒;timeout:如果提供了timeout,并且加载组件的时间超过了设定值,将显示错误组件,默认值为Infinity(单位毫秒);suspensible:异步组件可以退出控制,并始终控制自己的加载状态。onError:一个函数,该函数包含4个参数,分别是error、retry、fail和attempts,这4个参数分别是错误对象、重新加载的函数、加载程序结束的函数、已经重试的次数。
如下代码展示defineAsyncComponent方法的对象类型参数的用法:
上面的代码中,我们加载组件时前两次会请求错误,只有第三次加载才会成功,如果加载失败则会展示ErrorComponent组件。










