async/await只是then 的语法糖吗?有什么细微上的不同吗?为什么这两段代码输出不一致?

罗曼
  • 15

首先是async/await风格的promise
我理解的流程:

  1. 进入 async1(), 在其内部调用 async2()
  2. async2()内部没有异步代码,所以执行后会回到await处, 然后将下面的代码console.log('async1 end')注册在微任务队列里
  3. async1()流程结束
  4. 进入Promise(), 执行resolve(), 执行 then() 注册微任务
  5. 同步代码结束,执行微任务队列的回调函数
  6. 依次执行 console.log('async1 end')console.log('promise2')
async function async1() {
  await async2();
  console.log('async1 end');
}

async function async2() {
  return new Promise(resolve => {
    console.log('async2 promise');
    resolve(32); 
    // 这里的同步代码结束后流程会回到调用async2处
    // 然后把下边的 console.log('async1 end') 注册为 微任务吧?
  })
}

async1();

new Promise(resolve => {
  resolve();
}).then(() => {
  console.log('promise2');
})
// 以下是结果
// async2 promise
// promise2
// async1 end

下面这个是我所认为的逻辑上相同的then的写法

function async1() {
  async2().then(() => {
    console.log('async1 end');
  })
}


function async2() {
  return new Promise(resolve => {
    console.log('async2 promise');
    resolve(32);
  })
}

async1();

new Promise(resolve => {
  resolve();
}).then(() => {
  console.log('promise2');
})
// async2 promise
// async1 end
// promise2

为了方便比较,我放在了一张图片里
C%{0)`UFKOH7U3I$(T25SR0.png

回复
阅读 715
3 个回答
function async1() {
    return new Promise(function(resolve) {
        resolve(async2().then(function() {
            return new Promise(function(res) {
                res(console.log('async1 promise done'));
            });
        }));
    });
}
function async2() {
    return new Promise(function(resolve) {
        resolve(new Promise(function(re) {
            console.log('async2 promise done');
            re(32);
        }));
    });
}

async1();

new Promise(function(resolve) {
    resolve();
}).then(function() {
    console.log('promise2 done');
});

你忽略了一个问题async function本身就是一个返回Promise,不同版本的node对async2的这种情况处理不太一致。

以typescript playground作为标的,转换后的写法应该是:

function async1() {
  async2().then(() => {
    console.log('async1 end');
  })
}


function async2() {
  return new Promise(resolve => {
    resolve(new Promise(resolve => {
    console.log('async2 promise');
    resolve(32);
  }))
  })
}

async1();

new Promise(resolve => {
  resolve(1);
}).then(() => {
  console.log('promise2');
})
  1. async/await只是then的语法糖吗?
    async/await = Generator + Promise
  2. 为什么这两段代码输出不一致?
    async1转成Promise格式后相当于相当于:

    function async1() {
      new Promise(resolve => {
       resolve(async2());
      })
      .then(() => {
     console.log('async1 end');
      })
    }

    题主顺便再看看resolve函数的执行逻辑就知道原因了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏