【学员分享】JavaScript异步操作和promise

文章来源：川农罗同学

大家好，我是罗XX，今晚由我来为大家分享一下JavaScript中的异步操作以及promise

大家都知道，JavaScript是单线程的吧，所以它本身并不可能是异步的，但是JS的承载环建是多线程的，这让JS具备了一定的异步属性。

首先，关于异步操作，我想问一下大家，JS中哪些API算是异步的呢？

JS的异步操作，我简单给大家列了几点

如： setTimeout

readFile (Node环建下)

writeFile (Node环建下)

以及Ajax

那么现在我给大家一段代码，大家来简单分析一下这段代码的输出结果

这段代码很简单，程序首先会进入add方法，然后输出1，之后遇到异步操作setTimeout时并不会等着setTimeout执行完，而是接着输出3，到此，函数体由于没有返回值，则会再输出一个undefined ，然后经过1S后，程序输出2

可以看到，我们并不能拿到异步操作中的结果 ret ，所以现在我们有一个需求就是拿到异步操作中的结果，大家想一下有什么方法

这里，我写了两个大家可能会想到的方法

第一种方法

但是这种方法是行不通的，程序的输出依旧是undefined

第二种方法

可能会想通过一个全局变量来接收ret

这样，程序确实能得到异步操作的结果

但是这种方法肯定是无意义的

其实，我们可以通过一个回调函数来完成这一需求

即，在定义函数时，多加一个函数（通常将函数名命名为callback）作为其参数，如下

这样，就会将异步操作中的 ret 作为回调函数的参数去执行，从而从外部得到异步操作的结果

相信大家都用过jquery封装的ajax方法发送异步请求，如 $.get(‘xxxx’,function(){ })

大家就会发现往往异步操作都会伴有一个回调函数

所以我们从来没见过这样的操作吧 var ret = $.get（）

现在为了更好的了解底层，我们可以自己尝试着封装原生的JS的ajax

首先，原生的JS的ajax

现在我们通过callback进行封装自己的ajax方法

接下来，给大家简单的说一下promise

首先，大家都知道，如果有多个异步操作，是无法保证其输出顺序的，如：

a和b的输出顺序是不定的

所以现在有一个需求就是让b在a之后执行

大家可能会想到通过嵌套的方式，如

这样的确可以保证输出顺序，但是如果代码一多，就不便于维护，进入了回调地狱

回调地狱 可以给大家看一张图

所以，我们通过promise来解决回调嵌套的问题

Promise 首先是一个容器，里面存放了一个异步任务，异步任务的状态分为 resolved 和rejected

下面我们来通过promise来优化代码

首先，创建两个promise对象，里面分别装读取a和b的文件操作

然后通过promise对象的 then 方法进行调用异步操作，then方法中传递两个函数参数

第一个函数参数是异步操作成功后，进行的操作，对应resolve（data），第二个则是失败时进行的操作（可以省略第二个参数），对应reject（err），如

此时程序输出

现在要实现嵌套操作，只需在第一个函数体中 return 另一个promise对象，然后接着调用 then 方法，如

此时，就可以完成需求

最后，我们还可以将这个代码段进行封装，方便重复使用，如：

好了，我的分享到此就结束了，谢谢大家

  版权声明：本文来源于知了堂学员分享，转载请注明出处