在上次 Xebia 知识交流(Xebia Knowledge Exchange )活动中,我们用 Vue 函数 API 进行了实验,并创建了 vue-async-function,这个函数现在就可以用于你的 Vue 项目!让我们深入研究,看看它会为我们带来什么。
Vue 异步函数的背景
不久前,React 团队发布了 React Hooks。这是一种管理 React 组件中状态的新方法,无需使用传统的类语法。Vue.js 团队希望在下一个主要版本的 Vue 引入类似的语法。他们创建了一份提案 / 公开讨论文档 ,并正在开发与提案保持同步的实现。尽管这一实现仍处于激烈的讨论之中,但还是可以作为 Vue2 的插件来使用。
在 Xebia 知识交流活动中,我们的目标是分享知识,激励他人。幸运的是,React Async 的创建者 Gert 也加入了我们的行列,他认为,从他的库中重新实现 useAsync 和 useFetch hook 是个不错的主意。我们继续开发,不到一个小时,我们就成功地重新实现了这两个函数的基本版本。
开发过程
完成安装说明后,让我们以单文件组件格式来创建一个新组件:
现在,我们将介绍一个要调用的异步函数:
函数 loadSpaceship 将从 Star Wars API 获取一些数据。如果获取成功,它将返回 JSON 格式的数据,否则将抛出。
现在,我们想要:
在组件创建时调用此函数。
显示加载指示器。
提供有关数据可用性的数据。
由于某种原因获取失败。
如果没有 Vue 函数 API,你现在需要添加:
一种 data 方法,用于准备加载、错误和数据反应属性。
一种 created 生命周期方法,用于调用更新反应属性的函数。
随着时间的推移,这些可能会与其他生命周期和数据问题混合在一起。如此一来,会使你的代码更难以理解,也降低了它的可重用性。当然,你已经有了某些设计模式来区分这些问题,例如,通过混合或继承。Vue 函数 API 提供了一种以直观的方式区分这些问题的新方法。让我们来看看是如何工作的:
我们可以通过错误处理来扩展这个示例代码,并使用其他生命周期方法来使它更好。然而,这并不是 Vue 函数 API 的意义所在。在 setup 函数中,我们现在讲数据和生命周期问题组合在一起。更好的是,我们可以把他们放在不同的函数中。这是区分不同问题的首选方法,这就是 vue-function-api 的用武之地。
useAsync 与 useFetch
让我们看看使用 useAsync 时,这个示例代码是什么样的:
这示例代码也太短了吧!我们还可以把它变得更短。获取数据是如此常见,以至于有个专门的 useFetch 函数:
额外好处是:当你使用 useAsync 时,还会收到一个 AbortcController.signal,当组件被销毁时,可以连接起来中止网络请求。如果你使用 useFetch,这个问题已经得到解决。
结论
新的 Vue 函数 API 带来了好处:经过深思熟虑的设计模式。编写可重用的 Vue 函数感觉更为直观,并且你可以轻松地与他人分享。开发 useAsync 和 useFetch 函数帮助程序更顺利的执行。
有关代码或安装 npm 包,请参见 vue-async-function repo。参见示例 repo 中的更多示例代码。
英文原文:https://xebia.com/blog/next-generation-async-functions-with-vue-async-function/
评论