前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Async/await

Async/await

作者头像
wade
发布2020-04-24 17:14:23
5730
发布2020-04-24 17:14:23
举报
文章被收录于专栏:coding个人笔记

JavaScript的异步一直是JavaScript的一个复杂的事,从回调到Promise再到Generator,直到async/await,都是为了解决异步操作带来的麻烦。

先说说async,async是异步的意思,异步就表示不会阻塞代码执行,async写在一个函数声明之前,看个简单的例子:

代码语言:javascript
复制
async function fn() {
    console.log('async方法');
}
console.log('不会阻塞');
console.log('不会阻塞');执行了,所以async是异步的。但是加了async返回的是什么,我们可以console.log(fn())得到:
Promise {<resolved>: undefined}
所以async返回了一个Promise。之前我们讲过Promise,那么我们可以直接调用:
async function fn() {
    return '成功resolve';
}
fn(true).then((res) => {
    console.log(res);
});

这样看来,async好像只是用来生成一个Promise对象,没有什么用,那么这时候就要说一下await了,这两个一般会配套使用,一起出现。需要注意, await 关键字仅仅在 async function中有效。如果在 async function函数体外使用 await ,你只会得到一个语法错误(SyntaxError)。

await会使 async 函数暂停执行,等待 Promise 的结果出来,然后恢复async函数的执行并返回解析值(resolved)。所以await之后需要的是一个Promise对象。

代码语言:javascript
复制
var pro1 = new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log('正在执行.....');
        resolve('成功1');
        console.log('执行完毕.....');
    }, 2000);
});

var pro2 = new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log('正在执行.....');
        reject('成功2');
        console.log('执行完毕.....');
    }, 4000);
});

async function fn() {
    var res1 = await pro1;
    console.log(res1);
    var res2 = await pro2;
    console.log(res2);
}

fn();

我们可以看见,Promise对象里面很早就执行了,但是await之后一定会等到Promise成功返回才会向下执行。其中要是有一个返回reject的话也不会向下执行。

这样看起来跟Promise.then很像,但是两者不能混淆:

代码语言:javascript
复制
async function fn() {
    var i = 0;
    setInterval(function () {
        console.log(i++);
    }, 1000);
    var res1 = await pro1;
    console.log(res1);
    var res2 = await pro2;
    console.log(res2);
}

我们可以知道两个计时器是同时调用的,但是第二个计时器还是会在await之后输出,但是这两个计时器是在同一个事件队列进行,时间是根据最耗时的那个方法。而then方法则不是:

代码语言:javascript
复制
var i = 0;
setInterval(function () {
    console.log(i++)
}, 1000);
new Promise(function(resolve, reject){
    setTimeout(function () {
        resolve('star');
    }, 2000);
}).then(function(data){
    return new Promise(function(resolve, reject){
        setTimeout(function () {
            resolve('two result');
        }, 4000);
    });
}).then(function (value) {
    console.log(value);
}).catch(function(err){
    console.log('err: ', err);
});

到最后的输出结果用了6秒,所以两者是不同的。

看起来async/await跟Promise差不多,确实是,在不考虑太多的情况下,使用Promise反而更直接,但是在太多耗时很久的异步下,async/await会是更好的选择,语义也更清晰。

当然,在平时业务开发,很少用到这些,但是不保证会用到的时候。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-11-21,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档