JS进阶 | async/await和Promise

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第27天，点击查看活动详情

前情回顾

JS是单线程模式，为了提高运行效率，于是引入了异步编程，解决了单线程运行阻塞的问题

异步编程的几种方式：

1. 回调函数。多个回调函数嵌套，缺点是容易形成回调地狱
2. Promise。解决了异步操作的耦合问题，但链式调用then()有时过于冗长
3. async、await

关于Promise，在前面已经介绍过：juejin.cn/post/711245…

一、async 和 await

1. async
   • ES7（ES2017）的新语法
   • 用来声明异步函数
   • 基于Promise 实现，返回值为一个 Promise 对象
   • 使用 .then() 添加回调函数，并且async函数内部的异步操作执行完之后才会执行回调
   • 必须在async内使用
2. await
   • 异步等待，等待一个Promise
   • 只能在async函数内部使用，在普通函数中使用会报错
   • 后面写Promise对象，如果不是，会被转成一个立即 resolve 的Promise

二、特性

1. 执行以下代码，可以看到async 函数返回的是一个promise 对象：

2. sync 和 Promise 都用来声明异步函数，立即执行，不会阻塞后面的代码

async function sayHello() {
    return 'hello world'
}
sayHello().then(result => {
    console.log(result);
})
console.log('~~~~~~虽然写在最后面，但是先执行~~~~~~');

运行结果:

3. 注意事项：

const timeout = time => {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log('start')
            resolve();
        }, time);
    })
};

async unction Fn() {
    await timeout(300)
    console.log('end')
}
Fn()

输出：

start（3秒后）
end

• 遇到await会阻塞后面的代码，先执行async外面的同步代码，同步代码执行完，再回到async内部，继续执行await后面的代码
• await 的下一行代码，只有当 await 等待的 promise 被 resolve，才能被执行

三、总结

• 在函数名称前加async，async内部加await

• async可以看作是多个异步操作包装成的一个Promise 对象，await是then的语法糖

• async函数调用不会造成代码的阻塞（立即执行），但是await会引起async函数内部代码的阻塞（异步等待）

• 请求两个接口,第二个接口需要第一个接口之后执行，使用Async/Await

• 同时发出多个个不互相依赖的请求时，Promise.all 会比 Async/Await 更好