秒懂async与await

一、async 定义、await定义：

1、async function： 用来定义一个返回AsyncFunction对象的异步函数。异步函数是指通过时间循环一步执行的函数，它会通过一个隐式的promise返回其结果。

2、await： 操作符用于等待一个Promise对象。它只能在异步函数 async function中使用。

二、语法：

1、async function

async function name([param[, param[, ... param]]]) {
    
    statements}

注：[param[, param[, ... param]]]是要传递的参数，statements是函数体

2、await

[return_value] = await expression;

注：await后跟的是表达式expression,表达式是一个promise对象或者任何要等待的值。

三、返回值：

1、async function: 的返回值为promise对象，promise对象的结果由async函数执行的返回值决定。

2、await : await右侧的表达式一般为promise对象，但也可以是其它的值。

• 如果表达式是promise对象，await返回的是promise成功的值。
• 如果表达式是其它值，直接将此值作为await的返回值。

四、描述

async function：

1、 一个async异步函数可以包含0个或者多个await指令，该函数会暂停异步函数的执行，并等待Promise执行，然后继续执行异步函数，并返回结果。await关键字只在异步函数内有效。async函数通常返回一个promise对象。如果async函数的返回值不是一个标准意义上的promise对象，那它一定是包裹在了一个promise对象里面。
例如：

async function foo(){
    
    
	return 1;
}
//等价于

function foo(){
    
    
	return Promise.resolve(1);
}

2、async函数的函数体可以被认为是由0个或者多个await表达式分割开来。第一行代码到第一个await表达式之间的代码是同步运行的。在这种情况下（函数体中没有await表达式），async函数会同步运行。如果在方法体内由await表达式，然而，async方法会异步执行。

扫描二维码关注公众号，回复： 12321383 查看本文章

例如：

async function foo(){
    
    
	await 1;
}
//等价于
function foo(){
    
    
	return Promise.resolve.then(() => undefined);
}

await：
await表达式会暂停当前 async function的执行，等待Promise处理完成。 如果await的promise失败了，就会抛出异常，需要通过try–catch来捕获处理。

四、代码：

		async function fn1(){
    
    
            //throw 2
            return Promise.resolve(3);
        }
        const result = fn1();
        result.then(
            value => {
    
    
                console.log('onResolve()',value);
            },
            reason => {
    
    
                console.log('onReject()',reason);
            }
        )
        function fn2() {
    
    
            return new Promise((resolve,reject) => {
    
    
                setTimeout(()=>{
    
    
                    reject(3);
                },1000);
            })
        }

        function fn4(){
    
    
            return 6;
        }
        
        async function fn3(){
    
    
        
            const value = await fn1(); 

        //    const value = await fn2(); //await 右侧表达式为promise，得到的结果就是promise成功的value
            
        //    const value = await fn4(); //await 右侧表达式不是promise，得到的结果就是表达式的值
            
            try{
    
    
                const value = await fn1();
                console.log('value',value);
            }catch(error){
    
    
                console.log("得到失败的结果",error);
            }
            
        }
        fn3();

内容参考：MDN：https://developer.mozilla.org/zh-CN/