写点什么

如何手撸一个 Vue 3.0 异步函数 API?

  • 2019-08-02
  • 本文字数:2030 字

    阅读完需:约 7 分钟

如何手撸一个Vue 3.0异步函数API?

在上次 Xebia 知识交流(Xebia Knowledge Exchange )活动中,我们用 Vue 函数 API 进行了实验,并创建了 vue-async-function,这个函数现在就可以用于你的 Vue 项目!让我们深入研究,看看它会为我们带来什么。

Vue 异步函数的背景

不久前,React 团队发布了 React Hooks。这是一种管理 React 组件中状态的新方法,无需使用传统的类语法。Vue.js 团队希望在下一个主要版本的 Vue 引入类似的语法。他们创建了一份提案 / 公开讨论文档 ,并正在开发与提案保持同步的实现。尽管这一实现仍处于激烈的讨论之中,但还是可以作为 Vue2 的插件来使用。


Xebia 知识交流活动中,我们的目标是分享知识,激励他人。幸运的是,React Async 的创建者 Gert 也加入了我们的行列,他认为,从他的库中重新实现 useAsyncuseFetch hook 是个不错的主意。我们继续开发,不到一个小时,我们就成功地重新实现了这两个函数的基本版本。

开发过程

完成安装说明后,让我们以单文件组件格式来创建一个新组件:


<template>  <h2>useAsync example</h2></template> <script>export default {};</script>
复制代码


现在,我们将介绍一个要调用的异步函数:


// ... template
<script>async function loadStarship({ id }) { const headers = { Accept: "application/json" }; const res = await fetch(`https://swapi.co/api/starships/${id}/`, { headers }); if (!res.ok) throw new Error(res); return res.json();}
export default {};</script>
复制代码


函数 loadSpaceship 将从 Star Wars API 获取一些数据。如果获取成功,它将返回 JSON 格式的数据,否则将抛出。


现在,我们想要:


  • 在组件创建时调用此函数。

  • 显示加载指示器。

  • 提供有关数据可用性的数据。

  • 由于某种原因获取失败。


如果没有 Vue 函数 API,你现在需要添加:


  • 一种 data 方法,用于准备加载、错误和数据反应属性。

  • 一种 created 生命周期方法,用于调用更新反应属性的函数。


随着时间的推移,这些可能会与其他生命周期和数据问题混合在一起。如此一来,会使你的代码更难以理解,也降低了它的可重用性。当然,你已经有了某些设计模式来区分这些问题,例如,通过混合或继承。Vue 函数 API 提供了一种以直观的方式区分这些问题的新方法。让我们来看看是如何工作的:


<template>  <div>    <h2>useAsync example</h2>    <div v-if="isLoading">Loading...</div>    <div v-else-if="error">Error!</div>    <div v-else>{{ data }}</div>  </div></template>
<script>import { value, onCreated } from "vue-function-api";
// ... same loadStarship function
export default { setup() { const isLoading = value(true); const error = value(null); const data = value(null);
onCreated(async () => { try { const result = await loadStarship({ id: 2 }); data.value = result; } catch (e) { error.value = e; } finally { isLoading.value = false; } });
return { isLoading, error, data, }; } };</script>
复制代码


我们可以通过错误处理来扩展这个示例代码,并使用其他生命周期方法来使它更好。然而,这并不是 Vue 函数 API 的意义所在。在 setup 函数中,我们现在讲数据和生命周期问题组合在一起。更好的是,我们可以把他们放在不同的函数中。这是区分不同问题的首选方法,这就是 vue-function-api 的用武之地。

useAsync 与 useFetch

让我们看看使用 useAsync 时,这个示例代码是什么样的:


// ... same template
<script>import { useAsync } from "vue-async-function";
// ... same loadStarship function
export default { setup() { const { data, error, isLoading } = useAsync(loadStarship, { id: 2 }); return { data, error, isLoading }; }};</script>
复制代码


这示例代码也太短了吧!我们还可以把它变得更短。获取数据是如此常见,以至于有个专门的 useFetch 函数:


// ... same template <script>import { useFetch } from "vue-async-function"; export default {  setup() {    const id = 2;    const { data, error, isLoading } = useFetch(`https://swapi.co/api/starships/${id}/`, {       headers: { Accept: "application/json" }    });    return { data, error, isLoading };  }};</script>
复制代码


额外好处是:当你使用 useAsync 时,还会收到一个 AbortcController.signal,当组件被销毁时,可以连接起来中止网络请求。如果你使用 useFetch,这个问题已经得到解决。

结论

新的 Vue 函数 API 带来了好处:经过深思熟虑的设计模式。编写可重用的 Vue 函数感觉更为直观,并且你可以轻松地与他人分享。开发 useAsyncuseFetch 函数帮助程序更顺利的执行。


有关代码或安装 npm 包,请参见 vue-async-function repo。参见示例 repo 中的更多示例代码。


英文原文:https://xebia.com/blog/next-generation-async-functions-with-vue-async-function/


2019-08-02 10:162773
用户头像

发布了 536 篇内容, 共 270.8 次阅读, 收获喜欢 1561 次。

关注

评论

发布
暂无评论
发现更多内容

CDR2023最新版本有什么新功能?

茶色酒

Android技术分享| Bugly 应用升级自定义UI

anyRTC开发者

android 音视频 UI 移动开发 Bugly

首次公开!阿里巴巴最新高并发架构设计实录被我从Github扒下来了

Geek_0c76c3

Java 数据库 开源 程序员 开发

java线下培训哪家比较适合小白学习

小谷哥

KubeEdge 1.12版本发布,稳定性、安全性、可扩展性均带来大幅提升

华为云开发者联盟

云计算 云原生 华为云 kubeedge 企业号十月PK榜

最后一块石头的重量

掘金安东尼

算法 10月月更

mmmbsc互助系统开发3M智能合约技术

薇電13242772558

智能合约

OA是什么意思?

优秀

OA oa办公系统 OA是什么意思

互联网寒冬之际,凭借这份10w字大厂Java面试真题汇总,半月斩获7个Offer!

Java永远的神

spring 程序员 JVM 多线程 Java 面试

Go WEB进阶实战:基于GoFrame搭建的电商前后台API系统

王中阳Go

电商 Go web #go #开源 10月月更

OpenHarmony应用HAP包签名

OpenHarmony开发者

OpenHarmony

两种方式修复谷歌翻译无法使用问题

echeverra

Serverless架构演进与实践

得物技术

云计算 架构 DevOps 云原生 10月月更

线下学习web前端培训可以吗

小谷哥

全新出品!Github总榜排行第七的SpringCloud生态全栈笔记我粉了

Geek_0c76c3

Java 数据库 程序员 架构 面经

大数据开发培训学习费用多少呢

小谷哥

实例分析Scheduled Thread Pool Executor与Timer的区别

华为云开发者联盟

线程 开发 华为云 企业号十月PK榜

拿捏了!阿里2022最新JDK源码深度解析小册,Github全站热榜第二

Geek_0c76c3

Java 数据库 开源 程序员 开发

参加前端培训学习还值得吗

小谷哥

手把手教你入门Vue,猴子都能看懂的教程

知心宝贝

JavaScript 云原生 Vue 前端 可视化

Java开发培训机构怎样选择靠谱的

小谷哥

后CNN探索,如何用RNN进行图像分类

华为云开发者联盟

人工智能 华为云 CNN 企业号十月PK榜

已献出膝盖!GitHub上的宝藏级SpringBoot核心文档,讲得太清晰了

Geek_0c76c3

Java 数据库 开源 程序员 开发

追求性能极致:Redis客户端缓存带来的革命

程序员小毕

Java 数据库 redis 面试 后端

开源浪潮下,Apache APISIX 如何成为全球最活跃 API 网关

API7.ai 技术团队

API网关 APISIX 网关 OpenSergo

划重点!2022面试必刷461道大厂架构面试真题汇总+面经+简历模板

Geek_0c76c3

Java 数据库 程序员 架构 面试

特权账号管理系统是什么?是堡垒机吗?

行云管家

网络安全 堡垒机 账号安全 特权账号管理 特权账号

等保测评机构是什么意思?是什么性质的单位?

行云管家

公司 机构 等级保护 等保测评 等级测评

大数据ELK(二十三):Kibana简介

Lansonli

Kibana 10月月更

优秀!阿里甩出GC面试小册,仅7天Github获赞96.9K

Geek_0c76c3

Java 数据库 程序员 JVM 规划

MobTech短信验证常见问题

MobTech袤博科技

sdk 短信验证

如何手撸一个Vue 3.0异步函数API?_语言 & 开发_Albert Brand_InfoQ精选文章