异步任务 回调地狱 async/await

参考

三种异步

• defer 先加载，等待所有元素解析完成后 运行script
• async 异步加载并运行，谁先加载好就先运行谁
• 都无，则只加载和运行script

异步任务

如延时器setTimeout不会阻塞后续的语句

回调地狱

• 指回调函数多层嵌套，可读性差
• 可用Promise解决

setTimeout(function () {  //第一层
    console.log('武林要以和为贵');
    setTimeout(function () {  //第二程
        console.log('要讲武德');
        setTimeout(function () {   //第三层
            console.log('不要搞窝里斗');
        }, 1000)
    }, 2000)
}, 3000)

改成

function fn(str){
    var p=new Promise(function(resolve,reject){
        //处理异步任务
        var flag=true;
        setTimeout(function(){
            if(flag){
                resolve(str)
            }
            else{
                reject('操作失败')
            }
        })
    })
    return p;
}

fn('武林要以和为贵')
.then((data)=>{
    console.log(data);
    return fn('要讲武德');
})
.then((data)=>{
    console.log(data);
    return fn('不要搞窝里斗')
})
.then((data)=>{
    console.log(data);
})
.catch((data)=>{
    console.log(data);
})

async/await

返回值会自动封装为Promise

async function fn(){
    return '不讲武德';
}
console.log(fn());

await

• await关键字只能在使用async定义的函数中使用
• ​await后面可以直接跟一个 Promise实例对象（可以跟任何表达式，更多的是跟一个返回Promise对象的表达式）
• await函数不能单独使用
• await可以直接拿到Promise中resolve中的数据

async function test(){
    var res1=await fn('武林要以和为贵');  //await直接拿到fn()返回的promise的数据，并且赋值给res
    var res2=await fn('要讲武德');
    var res3=await fn('不要搞窝里斗');
    console.log(res1,res2,res3);
}