async/await 的理解和用法-Toy模板网

这篇具有很好参考价值的文章主要介绍了async/await 的理解和用法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、async

async放在函数前的一个修饰符，函数会默认返回一个Promise对象的resolve的值

// async基础语法
async function fun0(){
    console.log(1);
    return 1;  // 返回的是1   实际上调用这个函数返回的是一个Promise对象
}
fun0().then(val=>{
    console.log(val) // 1,1
})

async function fun1(){
    console.log('Promise');
    return new Promise(function(resolve,reject){
        resolve('Promise')
    })
}
fun1().then(val => {
    console.log(val); // Promise Promise
})

二、await

1、await也是一个修饰符，只能放在async定义的函数内，可以理解为等待

2、await 修饰的是Promise对象：获取Promise中返回的内容（resolve或reject的参数），且取到值后语句才会往下执行；

3、如果不是Promise对象：把这个非promise的东西当做await表达式的结果。

async function fun(){
    let a = await 1;
    let b = await new Promise((resolve,reject)=>{
        setTimeout(function(){
            resolve('setTimeout')
        },3000)
    })
    let c = await function(){
        return 'function'
    }()
    console.log(a,b,c)
}
fun(); // 3秒后输出： 1 "setTimeout" "function"

function log(time){
    setTimeout(function(){
        console.log(time);
        return 1;
    },time)
}
async function fun(){
    let a = await log(1000);
    let b = await log(3000);
    let c = log(2000);
    console.log(a);
    console.log(1)
}
fun(); 
// 立即输出 undefined 1
// 1秒后输出 1000
// 2秒后输出 2000
// 3秒后输出 3000

上面为什么输出的是1000 2000 3000呢？

await等待的如果不是Promise的话他不会阻塞后面的代码所以a、b、c他们是一起执行的反之await等待的是一个promise他就会阻塞后面的代码例如log()函数他是一个promise 那么他到a这里他就会阻塞后面的代码等他执行完了再到b 再等b执行完了到c, 输出的结果为1000， 3000， 2000

async/await 的正确用法

// 使用async/await获取成功的结果

// 定义一个异步函数，3秒后才能获取到值(类似操作数据库)
function getSomeThing(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('获取成功')
        },3000)
    })
}

async function test(){
    let a = await getSomeThing();
    console.log(a)
}
test(); // 3秒后输出：获取成功

详细看这个链接文章来源地址https://www.toymoban.com/news/detail-427375.html

到了这里，关于async/await 的理解和用法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！