理解 JavaScript 的 async / await

一、async 的作用

1. async 函数是怎么处理它的返回值的 ?

async function testAsync() {
    return "hello boy";
}

const result = testAsync();
console.log(result);

运行.js文件结果：

Promise { 'hello boy' }

# async 函数返回的是一个 Promise 对象;
# 函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象

async 参考文档;

(1) 相关知识点：Promise.resolve() 是什么?;

允许调用时不带参数： 直接返回一个resolved状态的 Promise 对象；

如果希望得到一个 Promise 对象，比较方便的方法就是直接调用Promise.resolve方法；

注意的是：

立即resolve的 Promise 对象，是在本轮“事件循环”（event loop）的结束时，

而不是在下一轮“事件循环”的开始时；

setTimeout(function () {
    console.log(3);
}, 0);
Promise.resolve().then(function () {
    console.log(2);
});
console.log(1);

**结果分析：**
# 上面代码中，setTimeout(fn, 0)在下一轮“事件循环”开始时执行；
# Promise.resolve()在本轮“事件循环”结束时执行，
# console.log(1)则是立即执行，因此最先输出

输出：1 ， 2 ，3

二、await 的作用

1 .await [ 等待 ] ：等的是什么？

等待的是一个表达式；
表达式的计算结果是 Promise 对象；
或者其它值【就是没有特殊限定】

（1）: 因为 async 函数返回一个 Promise 对象; 所以 await 可以用于等待一个 async 函数的返回值;

await 后面是可以接普通函数调用或者直接量；
await 接 async 函数；

function getSomething() {
    return "something";
}

async function testAsync() {
    return Promise.resolve("hello async");
}

async function test() {
    const ele1 = await getSomething();  ## （1）await 后面是可以接普通函数调用或者直接量
    const ele12 = await testAsync();    ## （2）await 接 async 函数
    console.log(ele1, ele2);
}

test();

2 . await 等到不同的数据， 会怎么样？

await 是个运算符：等到要等的会进行运算

（1）: 等到的不是一个 Promise 对象；

运算结果就是它等到的东西;

（2）: 等到一个 Promise 对象；

首先： 会阻塞后面的代码；
其次： 等待Promise 对象 resolve；
最终： 获取resolve 的值，作为 await 表达式的运算结果；

三、总结【结合代码例子】：

整体运行流程：

# 1.执行test() 异步函数;
# 2.执行 await takeLongTime();
# 3.注意: await 必须在一个async 异步函数中,例题满足;
# 4.运行中： await 此处等到的是takeLongTime()函数返回的一个Promise对象；;
# 5.运行中：await 等待到一个Promise对象后，会进行运算，等待Promise对象的resolve;
# 6.运行中：resolve 位置处于定时函数中，所以3秒后，resolve触发；;
# 7.运行中：await 最终运算获取resolve的数值，并赋值给const v;
# 8.最终：3秒后 await 的阻塞结束，console语句执行，输出返回结果赋值的V；

// takeLongTime()实际就是一个async函数，因为async函数本质就是return一个Promise对象；
function takeLongTime() { 
    return new Promise(resolve => {
        setTimeout(() => resolve("long_time_value"), 3000);
    });
}

async function test() {
// await 必须在一个async 异步函数中；
// await 此处等到的是takeLongTime()函数返回的一个Promise对象；
// await 等待到一个Promise对象后，会进行运算，等待Promise对象的resolve
// resolve 位置处于定时函数中，所以3秒后，resolve触发；
// await 最终运算获取resolve的数值，并赋值给const v;
    const v = await takeLongTime(); 
// 3秒后上一步的阻塞结束，console语句执行，输出返回结果赋值的V；
    console.log(v);  
}

test();

四、结尾：几句话概括async 、await

总结语句 :

1. async 函数是一个返回 Promise对象的函数；
2. await 是一个后面可以跟Promise对象【也就是说可以跟async函数】或者非Promise对象的运算符；
3. await 必须在一个异步函数async中；
4. await 后跟Promise对象会阻塞代码执行，进行运算，直到拿到Promise的resolve中的值；**