async await 介绍 从0手动实现async await

1 async await介绍

        async 和 await 是用于处理异步编程的语法糖，它们简化了异步操作的编写，使其看起来像同步代码。通过 async 标记一个函数为异步函数，返回的是一个 Promise 对象，而 await 用来暂停执行，直到 Promise 解决9相当于then函数），错误处理使用try...catch...（相当于catch），从而实现异步流程的同步化表达。下面将通过代码示例逐步解释上面一段话。

1.1  async 标记函数 返回 Promise 对象

        调用async方程式将会返回Promise对象，即使返回值不是Promise也会包装，相当于调用了Promise上的静态类方法resolve对返回值进行了封装，代码如下：

async function asyncFunction() {
    console.log("inside asyncFunction");
    return 'Hello';
}

async function undefinedFunction(){
    console.log("inside undefinedFunction");
    console.log('no return value');
}

// 调用async函数时会立即执行函数内部的代码，并且将返回一个promise对象
console.log(asyncFunction()); // Promise { 'Hello' }  // async function always return a promise
// 相当于resolve了一个promise
Promise.resolve('Hello')
console.log(undefinedFunction()); // Promise { undefined }
// 输出结果：
// inside asyncFunction
// Promise { 'Hello' }
// inside undefinedFunction
// Promise { undefined }

1.2 await 用来暂停执行，直到 Promise 解决 错误处理

        await 的工作原理类似于调用 Promise 的 then 方法，等待 Promise 从 pending 状态变为 fulfilled 状态后返回结果（相当于暂停代码了，后面都是回调函数callback）。如果 Promise 失败或一直处于 pending 状态，将会在下文介绍。因为 async 函数返回的是一个 Promise，所以 await 后面不仅可以跟 Promise，也可以跟 async 函数或其他值。若是其他值，JavaScript 会先将其转换为 Promise.resolve(val)，再继续执行。这样 await 可以兼容不同类型的数据并处理异步操作。

        下面代码是一般的await的使用，演示了Promise，async function，normal value的处理情况。 

(async function awaitTestFunction() {
    // await 处理async函数返回的promise对象
    let res = await asyncFunction()
    console.log(res) // Hello

    // await 处理promise对象
    res = await new Promise((resolve) => {
        setTimeout(() => {
            resolve('world')
        }, 1000)
    })
    console.log(res) // world

    // await 处理普通值
    res = await 'normal value'
    console.log(res) // normal value
})();
// 最终输出结果
// Hello
// world
// normal value

        当出现Promise一直处于pending状态，throw error 或者rejected状态就会代码执行，这时就要使用try catch捕获错误（这样就替代了.catch的作用）如下所示：

async function pendingFunction(){
    console.log("inside pendingFunction");
    // await将会一直等待promise对象的状态变为resolved，在node环境中将会直接导致程序退出
    await new Promise(() => {
    })
    // 将会无法执行到这里
    console.log('after pending')
}

async function rejectFunction(){
    console.log("inside rejectFunction");
    try {
        // 抛出错误
        await new Promise((undefined, reject) => {
            // reject('reject error during new Promise instance')
            throw new Error('throw error')
        })
    } catch (error) {
        console.log(error) // reject
    }
    // 不使用try catch将会无法执行到这里
    console.log('after reject')
}

async function Testall(){
    // await awaitTestFunction()
    // await pendingFunction()
    await rejectFunction()
}

Testall()

        await一直处于pending状态将会导致程序直接中断。await后面的错误不使用try...catach捕获将会导致程序报错终止 。

1.3 async和await综合使用

        现在将上面所有的async函数按照从前到后的顺序依次执行，实现异步操作变为同步操作，代码如下所示：

async function asyncFunction() {
    console.log("inside asyncFunction");
    return 'Hello';
}

async function undefinedFunction(){
    console.log("inside undefinedFunction");
    console.log('no return value');
}

async function awaitTestFunction() {
    // await 处理async函数返回的promise对象
    let res = await asyncFunction()
    console.log(res) // Hello

    // await 处理promise对象
    res = await new Promise((resolve) => {
        setTimeout(() => {
            resolve('world')
        }, 1000)
    })
    console.log(res) // world

    // await 处理普通值
    res = await 'normal value'
    console.log(res) // normal value
}

async function pendingFunction(){
    console.log("inside pendingFunction");
    // await将会一直等待promise对象的状态变为resolved，在node环境中将会直接导致程序退出
    await new Promise(() => {
    })
    // 将会无法执行到这里
    console.log('after pending')
}

async function rejectFunction(){
    console.log("inside rejectFunction");
    try {
        // 抛出错误
        await new Promise((undefined, reject) => {
            // reject('reject error during new Promise instance')
            throw new Error('throw error')
        })
    } catch (error) {
        console.log(error) // reject
    }
    // 不使用try catch将会无法执行到这里
    console.log('after reject')
}

// 如果顶层异步函数之间资源有先后要求，可以使用await来保证执行顺序
async function Testall(){
    await asyncFunction()
    await undefinedFunction()
    await awaitTestFunction()
    // await pendingFunction()
    await rejectFunction()
}

Testall()

1.4 手写代码实现async和await逻辑-待定

1.5 总结与注意事项

•  不能在全局作用域顶层使用await，将异步操作封装在async函数中然后再调用。
•  async和await与Promise是相辅相成的，async相当于new Promse，await相当于.then方法，使用try...catch...相当于.catch方法
• async和await是语法糖，将异步执行的代码转变为同步执行（这是由于js单线程执行的特性）。
• async 函数返回 Promise：当一个函数使用 async 关键字定义时，它会自动返回一个 Promise，即使函数内部没有显式返回 Promise。
• await 等待异步操作完成：await 用于暂停 async 函数的执行，等待 Promise 解决（fulfilled），并返回其结果。
• 兼容同步值：await 不仅可以处理 Promise，如果跟随的是非 Promise 值，会被自动包装为 Promise.resolve(val)。