欢迎来到知了汇智!
联系电话:知了汇智-电话号码 028-62016472 / 13228113191

【学员分享】JavaScript异步操作和promise-知了汇智

【学员分享】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 方法,如

此时,就可以完成需求

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

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

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

132 2811 3191
预约免费试学
点击咨询
预约试学