js异步编程(异步功能间的同步顺序保持)

一、称呼的问题

相信很多人听到异步这个词首先浮现的是:各做各的事,不相干扰

由于js是单线程,所异步操作对其来说很重要,简单来讲异步就是将某些事先放放,先去做主要重要的事,等会回过来再做

但是今天我想说其实我们常常挂在嘴边的异步应该说是如标题中所描述的 "异步功能间的同步顺序保持"  

一般我们实现 异步功能间的同步顺序保持 (下面简称 异步同步保持),下面我们就来具体聊聊


二、日常的异步问题

为了保持问题的统一性,我们全篇将以 实现泡茶的3个主要流程(1、烧水  2、洗杯子  3、放茶叶泡茶)为例

大家思考在现实情况中是否泡茶的几个流程具有异步的特征

每个步骤所需时间各不一样,

有些步骤可以同时进行

需要保证一定的操作顺序

使用正确解决方案之前我们来看看将其转化为js代码的表达:

js异步编程(异步功能间的同步顺序保持)

执行结果如下:

js异步编程(异步功能间的同步顺序保持)


原因可想而知,但是这样的流程是我们想要的吗,所以说有时候我们需要保证异步操作间的执行顺序,也就是前面所说,其实我们常常所说的异步,其实可以理解为此功能是异步的代码,不会立马执行完成,但是很多时候我们常常所表达的隐含含义是:异步同步保持

那么具体如何实现多个具有流程依赖的异步代码间的同步顺序保持呢,请看下面 


三、解决方案

现在常用的实现 异步同步保持 有三种主要方式:1、回调函数、2、Promise、3、async异步函数

1、回调函数

早期由于语言限制常用的实现手段为 callback回调函数做法,具体形式如下:

js异步编程(异步功能间的同步顺序保持)

执行结果如下:

js异步编程(异步功能间的同步顺序保持)

有结果所知,整个泡茶的各个异步功能之间保持了设定的同步执行顺序,是不是感觉很惊喜,很高兴

别急,别高兴的太早

思考一个问题,假如有一个新的业务流程需要实现,其中包含了很多个异步代码功能,需要保证他们之间的同步执行顺序,该如何?

当然也是按照设定callback回调函数方式,但是这种方式会带来如下烦恼js异步编程(异步功能间的同步顺序保持) 

js异步编程(异步功能间的同步顺序保持)

js异步编程(异步功能间的同步顺序保持)

有密集恐惧症的请快速关闭屏幕

是不是很吓人,代码的嵌套层次太多了,太深了,是的我们一般称之为 callback hell 回调地狱


2、Promise

由此引出第二种解决方案,Promise承诺

js异步编程(异步功能间的同步顺序保持)

js异步编程(异步功能间的同步顺序保持)

执行结果如下:

js异步编程(异步功能间的同步顺序保持)

注意,注意,注意 回调地狱的陷阱 是不是已经不存在,代码呈现一种平行结构书写

3、async函数

后续javascritp又兴起一个叫做 async异步函数的东西,也能用来解决 异步同步保持

js异步编程(异步功能间的同步顺序保持)

js异步编程(异步功能间的同步顺序保持)


本文中没有对某些知识点进行具体说明,例如:Promise async这些知识点大家可以自己查找资料了解,这些是ECMAScript 2015 ES6中的新标准实现,可以多了解

如有疑问可以留言,回复可能不会很及时 或者 加 QQ 1465768310一起探讨