文档章节

Javascript的地狱回调:

duozuo2006
 duozuo2006
发布于 2016/12/05 18:54
字数 1203
阅读 15
收藏 0

#程序员薪资揭榜#你做程序员几年了?月薪多少?发量还在么?>>>

前言

本文由@rccoder投稿分享。作者总结了四种方式来进行异步操作。

 

正文从这开始~

 

1. 讲个笑话

 

JavaScript 是一门编程语言

 

2. 异步编程

 

JavaScript 由于某种原因是被设计为单线程的,同时由于 JavaScript 在设计之初是用于浏览器的 GUI 编程,这也就需要线程不能进行阻塞。

 

所以在后续的发展过程中基本都采用异步非阻塞的编程模式。

 

简单来说,异步编程就是在执行一个指令之后不是马上得到结果,而是继续执行后面的指令,等到特定的事件触发后,才得到结果。

 

也正是因为这样,我们常常会说: JavaScript 是由事件驱动的。

 

3. 异步实现

 

用 JavaScript 构建一个应用的时候经常会遇到异步编程,不管是 Node 服务端还是 Web 前端。

 

那如何去进行异步编程呢?就目前的标准以及草案来看,主要有下面的几种方式:

  • 回调

  • promise

  • Generator

  • await/async

 

3.1 回调

 

这种异步的方式是最基础的实现,如果你曾经写过一点的 Node, 可能经常会遇到这样的代码:

 

如此,connection.query() 是一个异步的操作,我们在调用他的时候,不会马上得到结果,而是会继续执行后面的代码。这样,如果我们需要在查到结果之后才做某些事情的话,就需要把相关的代码写在回调里面,如果涉及到多个这样的异步操作,就势必会陷入到回调地狱中去。

 

这种回调地狱不仅看起来很不舒服,可读性比较差;除此之外还有比较重要的一点就是对异常的捕获无法支持。

 

3.2 Promise

 

Promise 是 ES 2015 原生支持的,他把原来嵌套的回调改为了级联的方式。

 

一般着,我们对一个 Promise 可以这样写:

 

如果要涉及到多个异步操作的顺序执行问题,我们可以这样写:

 

也可以把函数抽离出来

 

我们只需要 return 一个 Promise 即可实现这种多个异步操作的顺序执行。

 

粗略来看,这是一个比较优雅的异步解决方案了,并且在 Promise 中我们也可以实现分级的 catch。

 

但对于之前接触过其他语言的同学来说还是比较别扭的。那能否用同步的方式来书写异步呢?

 

3.3 Generator

 

在 ES 2015 中,出现了 Generator 的语法,熟悉 Python 的同学肯定对这种语法有点了解。

 

简单来说,Generator 可以理解为一个可以遍历的状态机,调用 next 就可以切换到下一个状态。

 

在 JavaScript 中,Generator 的 function 与 函数名之间有一个 *, 函数内部使用 yield 关键词,定义不同的状态。

 

先看一段代码:

 

上面的这段代码是借助 TJ 的 co 实现的,依照约定,co 中 yield 后面只能跟 Thunk 或者 Promise.

 

co 的实现代码很短,简单来说大体是这样:

 

简单来说就是一直借助 generator 的 next 进行迭代,直到完成这个异步操作才返回。当前人家官方的 co 是 200 行代码,支持异步操作的并行:

 

但如果我们使用 co,强迫症们就会觉得这不是标准的写法,有点 hack 小子的感觉。

 

幸运的是,在 ES 2016 的草案中,终于提出了标准的写法。

 

3.4 await/async

 

这是在 ES 2016 中引入的新关键词,这将在语言层面彻底解决 JavaScript 的异步回调问题,目前可以借助 babel 在生产环境中使用。使用 await/async 可以让异步的操作以同步的方式来写。

 

使用方法和 co 非常类似,同时也支持同步写法的异常捕获。

 

如果上述的代码完全用 Promise 实现,极有可能是下面的代码:

 

相比较来说,await/async 解决了完全使用 Promise 的一个极大痛点——不同Promise之间共享数据问题:

 

Promise 需要设定外层数据开始共享,这样就需要在每个then里面进行赋值,而 await/async 就不存在这样的问题,只需要以同步的方式去写就可以了。

 

await/async 对异常的支持也是特别好的:

参考文献

  • 回调地狱 @ 奇舞团博客

  • ES6 Generator介绍 @ 腾讯全端 AlloyTeam 团队 Blog

  • 使用Generator解决回调地狱 @ 腾讯全端 AlloyTeam 团队 Blog

  • 「大概可能也许是」目前最好的 JavaScript 异步方案 async/await @ LearnClound

 

关于本文

作者:@rccoder

原文:https://github.com/rccoder/blog/issues/17

© 著作权归作者所有

duozuo2006
粉丝 0
博文 13
码字总数 8728
作品 0
北京
私信 提问
加载中

评论(0)

async/await 之于 Promise,正如 do 之于 monad

原文链接 CertSimple 网站最近发布了一篇文章,说 ES2017 里的 async 和 await 是 JS 最好的特性。我非常赞同。 基本上来说,JS 为数不多的几个优点之一就是对异步请求的处理得当。这得益于它...

方应杭在饥人谷
2019/05/13
0
0
【译】JavaScript中的Callbacks

你是否遇到过"callbacks"一词,但是不知道这意味着什么?别着急。你不是一个人。许多JavaScript的新手发现回调也很难理解。 尽管可能令人疑惑,但是你仍然需要彻底了解它们,因为它们是JavaS...

call_me_R
2019/05/02
0
0
更优雅的方式: JavaScript 中顺序执行异步函数

火于异步 1995年,当时最流行的浏览器——网景中开始运行 JavaScript (最初称为 LiveScript)。 1996年,微软发布了 JScript 兼容 JavaScript。随着网景、微软竞争而不断的技术更新,在 20...

osc_l1gtz377
2018/04/05
4
0
Flutter 中使用Future消除Callback Hell

/先分别定义各个异步任务Future<String> login(String userName, String pwd){ };Future<String> getUserInfo(String id){ };Future saveUserInfo(String userInfo){ };接下来,执行整个任务......

osc_uwnmtz9n
2019/09/25
4
0
深入理解 JavaScript 回调函数

作者:Nilesh Sanyal 翻译:疯狂的技术宅 原文:dzone.com/articles/ja… 未经允许严禁转载 JavaScript回调函数是成为一名成功的 JavaScript 开发人员必须要了解的一个重要概念。但是我相信,...

前端先锋
2019/11/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

window下 mongodb开启用户名和密码 权限

在默认情况下,mongod是监听在127.0.0.1之上的,任何客户端都可以直接连接27017,且没有认证。 好处是,用户可以即时上手,不用担心被一堆配置弄的心烦意乱。 坏处是,公网服务器搭建MongoDB...

东东笔记
今天
9
0
数据倾斜

数据倾斜: 两种数据倾斜发生的现象: 80%情况下都发生挂了,只有极少20%情况下能把task执行完成 窄依赖:结构简单,如果发生数据丢失,方便查找丢失的数据 宽依赖:结构复杂,如何发生数据丢...

七宝1
今天
20
0
我的jdk源码(十一):ArrayList

一、概述 ArrayList类是AbstractList的子类,实现了具体的add(), set(), remove()等方法。它是一个可调整大小的数组可以用来存放各种形式的数据。 二、源码分析 (1) 类的声明,源码如下: ...

Java觉浅
昨天
24
0
vnc server,vnc server是什么,vnc工具推荐

nc server是一个用来共享linux服务器上资源给其他分布式用户的服务只要再一台linux系统的机器上安装vnc server,然后开启服务,其他机器就可以通过vncviewer访问这台机器上的共享资源,那么今...

兔子m
昨天
20
0
COLA的扩展性使用和源码研究

cola扩展点使用和设计初探 封装变化,可灵活应对程序的需求变化。 扩展点使用 步骤: 定义扩展点接口,类型可以是校验器,转换器,实体; 必须以ExtPt结尾,表示一个扩展点。 比如,我定义一个...

李福春carter
昨天
27
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部