写点什么

如何手撸一个 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:162899
用户头像

发布了 540 篇内容, 共 293.5 次阅读, 收获喜欢 1572 次。

关注

评论

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

《数字经济全景白皮书》Z世代用户洞察篇(2)重磅发布!

易观分析

Z世代

Flink整合ElasticSearch详细指南及踩坑记录

五分钟学大数据

4月月更

人人都可以学会的产品手册制作方法

小炮

产品宣传手册

什么时候需要使用CRM系统?

低代码小观

CRM 客户关系管理 低代码开发 CRM系统 客户关系管理系统

基于LAXCUS开发分布式视频转码应用

LAXCUS分布式操作系统

分布式计算 分布式应用 视频转码

增长270%!PWA 在 Chrome 平台迎来井喷式增长

鼎道智联

龙蜥大讲堂:如何利用硬件SIMD指令提升Java程序的性能?|第14期

OpenAnolis小助手

Java simd arm sig 龙蜥大讲堂

TASKCTL 调度设计器作业属性的应用

敏捷调度TASKCTL

分布式 元数据区 ETL 自动化运维 任务调度器

小程序运行时+SAAS级服务,提升研发降本增效作用

Speedoooo

flutter APP开发 SaaS平台 小程序容器 小程序运行时

CrashSight异常崩溃管理解决方案

WeTest

TiDB 在连锁快餐企业丨海量交易与实时分析的应用探索

TiDB 社区干货传送门

TASKCTL 变量的函数表达式运算

敏捷调度TASKCTL

批量任务 调度引擎 ETL 自动化运维 调度任务

DDD实战(8):冲刺1战术之聚合设计

深清秋

DDD 软件架构 生鲜电商系统 4月月更

【云管平台】三大云管平台厂商详细介绍

行云管家

云计算 云管平台 云堡垒机 云厂商

桌面运维工程师需要会哪些技能?主要是做什么的?

行云管家

云计算 运维 运维工程师 IT运维 云运维

组合式应用新利器?SaaS新时代事件网格如何解决集成标准化问题

华为云开发者联盟

Serverless 无服务器 事件网格 组合式应用

GPU底层技术、全球市场格局分析(中)

Finovy Cloud

人工智能 云计算 云服务器 GPU服务器 GPU算力

华为云物联网高级攻城狮的4年配置中心实践分享

华为云开发者联盟

开源 DevOps 配置中心 Apollo 业务配置

MySQL事务并发带来的问题以及其解决方案分析

乌龟哥哥

4月月更

轻量级兼顾本地体验,PWA应用到底有多卷?

鼎道智联

鲸智WhaleBI 平民化数据消费还业务以真正的“数据自由”

鲸品堂

方法论 数据 数据治理

NFT数字藏品交易平台系统开发搭建

薇電13242772558

NFT 数字藏品

火山引擎 MARS X 今日头条 | 大型App高效协同开发,实现研发流程自动化

字节跳动终端技术

今日头条 字节跳动 研发 火山引擎MARS

大咖说·智篆商业|颜杰华:数字经济时代,不确定性中的确定性

大咖说

阿里巴巴 数字经济数字时代 数智化 存量时代

LSM-Tree - LevelDb了解和实现

懒时小窝

LSM树 LSM-Tree

2022年中国茶饮产业洞察

易观分析

茶饮 产业洞察

一起来试玩!在线可编程交互的实时音视频 Web SDK 入门教程

声网

音视频 教程

关于 WordPress 你了解多少?

海拥(haiyong.site)

4月月更

java高级用法之:JNA中的Structure

程序那些事

Java 程序那些事 JNA 4月月更

项目中如何优雅的消除if-else

Rubble

4月日更 4月月更

当 API 成为服务,我们将连接一切!

鼎道智联

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