async await 练习

942 阅读3分钟
async function t1(){
    let a = await 'dongdong';
    console.log(a);
}
t1();
async function t2(){
    let a = await new Promise((resolve)=>{});
    console.log(a);
}
t2();
async function t3(){
    let a = await new Promise((resolve)=>{
        resolve();
    });
    console.log(a);
}
t3();
async function t4(){
    let a = await new Promise((resolve)=>{
        resolve('hello dongdong');    });
    console.log(a);
}
t4();
async function t5(){
    let a = await new Promise((resolve)=>{
        resolve('hello');
    }).then(()=>{
        return 'lala';
    });
    console.log(a);
}
t5();

async function t6(){
    let a = await fn().then(res=>{
        return res;
    });
    console.log(a);
}
async function fn(){
    await new Promise((resolve)=>{
        resolve('dongdong');    }); 
}
t6();

async function t7(){
    let a = await fn().then(res=>{
        return res;
    });
    console.log(a);
}
async function fn(){
    await new Promise((resolve)=>{
        resolve('dongdong');    }); 
    return 'lala';
}
t7();

one by one

async function t1(){
    let a = await 'dongdong';
    console.log(a);//dongdong
}
t1();

解析:await是一个表达式,如果后面不是一个promise对象,就直接返回对应的值。 所以问题1可以理解为 javaScript async function t1(){ let a = dongdong'; console.log(a); } t1();

async function t2(){
    let a = await new Promise((resolve)=>{});
    console.log(a);//
}
t2();

解析:await后面如果是一个promise对象,await将等待这个promise对象的resolve状态的值value,且将这个值返回给前面的变量,此时promise对象的状态是一个pending状态,没有resolve状态值,所以什么也打印不了。

async function t3(){
    let a = await new Promise((resolve)=>{
        resolve();
    });
    console.log(a);//undefined
}
t3();

解析:await后面如果是一个promise对象,await将等待这个promise对象的resolve状态的值value,且将这个值返回给前面的变量,此时promise对象的状态是一个resolve状态,但它的状态值是undefined,所以打印出来的就是undefined。

async function t4(){
    let a = await new Promise((resolve)=>{
        resolve('hello dongdong');
    });
    console.log(a);//hello dongdong
}
t4();

解析:await后面如果是一个promise对象,await将等待这个promise对象的resolve状态的值value,且将这个值返回给前面的变量,此时promise对象的状态是一个resolve状态,且它的状态值是'hello dongdong',所以打印出来的就是hello dongdong

async function t5(){
    let a = await new Promise((resolve)=>{
        resolve('hello');
    }).then(()=>{
        return 'lala';
    });
    console.log(a);//lala
}
t5();

解析:await后面如果是一个promise对象,await将等待这个promise对象的resolve状态的值value,且将这个值返回给前面的变量。此时promise对象的状态值是一个resolve状态,且它的状态值是'hello'。紧接着后面又执行了一个then方法,then方法又会返回一个全新的promise对象,且这个then方法中的返回值会作为这个全新的promise中resolve的值。,所以最终的打印出来的是'lala'。

async function t6(){
    let a = await fn().then(res=>{
        return res;
    });
    console.log(a);//undefined
}
async function fn(){
    await new Promise((resolve)=>{
        resolve('dongdong');
    }); 
}
t6();

解析:async函数执行返回一个promise对象,且async函数内部的返回值会作为这个promise的resolve状态的值。

javaScript async function fn(){ return 'a'; } console.log(fn()); //Promise {<fulfilled>: "a"} //__proto__: Promise //[[PromiseStatus]]: "fulfilled" // [[PromiseValue]]: "a" 首先考虑fn()执行返回一个promise对象,且因为fn执行没有返回值,所以这个promise对象的状态resolve的值是undefined。且将这个undefined作为下个then中回调函数的参数,所以打印的结果是undefined。

async function t7(){
    let a = await fn().then(res=>{
        return res;
    });
    console.log(a);//lala
}
async function fn(){
    await new Promise((resolve)=>{
        resolve('dongdong');
    }); 
    return 'lala';
}
t7();

解析:async函数执行返回一个promise对象,且async函数内部的返回值会作为这个promise对象的resolve状态的值。 这道题首先要考虑fn()执行返回一个promise对象,且fn的返回值是'lala',所以这个promise对象的resolve状态值是'lala'。且将'lala'作为下一个then回调函数中的参数,所以打印结果就是lala。

总结

async函数执行的返回结果是一个promise对象,这个函数的返回值是这个promise对象的resolve状态的值。 await后面如果不是一个promise对象,则直接返回这个值。 await后面如果是个promise,则将返回这个promise对象的resolve状态的值。 以上没有考虑reject状态。

有缘看到这篇文章的话,欢迎指正哈