关于JavaScript中异步/等待的用法与理解
昨天更新的是“JavaScript中的Promise使用详解”,其实也就是说了下基本用法和自己对Promise的理解,可能有错误之处,也欢迎指出。今天就说一说“JavaScript中的async/await的用法和理解”
JavaScript中异步/等待的用法和理解
编程语言中任意一个关键字都是有意义的,我们先从字面意思来理解。
1.async
async是“异步”的简写,带async关键字的函数,是声明异步函数,返回值是promise对象,如果async关键字函数返回的不是promise,会自动用Promise.resolve()包装。
asyncfunctiontest(){ return'helloword' } test();
运行上面代码返回结果如下
2.await
await可以认为是asyncwait的简写。所以应该很好理解async用于申明一个function是异步的,而await用于等待一个异步方法执行完成。
如果它等到的不是一个Promise对象,那await表达式的运算结果就是它等到的东西。
如果它等到的是一个Promise对象,await就忙起来了,它会阻塞后面的代码,等着Promise对象resolve,然后得到resolve的值,作为await表达式的运算结果。
我们看下面段代码
functiontest(){ returnnewPromise(resolve=>{ setTimeout(()=>resolve("helloword"),2000); }); } constresult=test(); console.log(result.then((val)=>{console.log(val)})); console.log('结束')
我们以编辑器编辑器代码执行顺序来理下,
1.首先我们定义一个方法,这个方法返回Promise对象,.then()函数两秒钟后返回调用成功。
2.接下来实例化test()函数。
3.调用result对象的then()函数,接收返回值,注意,这里是异步的
4.打印日志结束
我们运行代码,看结果
看到先打印“结束”,然后才打印的“helloword”,这就是异步,我们改造下代码
functiontest(){ returnnewPromise(resolve=>{ setTimeout(()=>resolve("helloword"),2000); }); } constresult=awaittest(); console.log(result); console.log('结束')
用await关键字接test()函数,看这次返回结果
我们发现先打印“helloword”,然后才打印“结束”,由于test()造成的阻塞,console.log(‘结束')会等到两秒后执行。
再来说下优缺点
优点:相对于promise,async/await处理then的调用链,代码要清晰很多,几乎和同步代码一样。
缺点:滥用await可能会导致性能问题,因为await会阻塞代码。
总结
到此这篇关于JavaScript中异步/等待的用法与理解的文章就介绍到这了,更多相关JavaScript异步/等待的用法内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票!