美文网首页js
await 后跟promise()与 普通函数的区别

await 后跟promise()与 普通函数的区别

作者: 家有饿犬和聋猫 | 来源:发表于2019-05-28 10:34 被阅读0次

    async的ES7的关键字,它的意思是异步,可以单独使用
    使用方法是放在函数前面,声明这是一个异步函数,等同步代码执行完之后再执行它
    示例代码:

       async function  wo(){
            console.log("1233")
        }
        micr=()=>{
            console.log("4566")
        }
        micr();
        wo();
       //执行结果     4566 1322      
        wo();
        micr();
       //执行结果   1322   4566 
       此时的wo()函数里和mocr()函数都是同步
    
    

    如果async 函数有返回结果,要在.then()来承接结果

     async function  po(){
        return "小枫"
       }
    
      po().then(
            rem=>{
                console.log("rem",rem)  //后执行
            }
        )
      po();                               
      console.log("po",po())     //先执行
    
        
        // 打印结果 po  Promise <"小枫">
       // 打印结果 "rem",小枫
      //此时.then()函数内执行的就是异步,在同步之后执行
    

    await的意思是等待,等待此函数执行后,再执行下一个,可以把异步函数变成同步来执行,控制函数的执行顺序。await一定要搭配async使用。
    当 await 后的函数 返回的是promise()

    f1=()=>{
        return new Promise((resolve)=>{
           
            setTimeout(() => {
                console.log("周")
                resolve();     //这一步必写,否则会阻塞在这里
            }, 1000);
        })
       
    }
    f2=()=>{
        return new Promise((resolve)=>{
           
            setTimeout(() => {
                console.log("震")
                resolve();
            }, 1000);
        })
    }
    f3=()=>{
        return new Promise((resolve)=>{
           
            setTimeout(() => {
                console.log("南")
                resolve();
            }, 1000);
        })
    }
    async function  con(){
             await f1();
             await f2();
             await f3();
    }
    con();
    // 打印结果  每隔1秒输出一个字  周 震 南
    

    当await 后跟的是普通函数(非promise())

    function H1(){
        setTimeout(()=>{
    
            console.log("I  ")
        },1000)
    }
    function H2(){
        setTimeout(()=>{
        console.log("am  ")
       },1000)
    }
    function H3(){
        setTimeout(()=>{
        console.log("fangqianwen  ")
        },1000)
    }
    async function  Hon(){
        await H1();
        await H2();
        await H3();
    }
    Hon();
    // 打印结果  隔了一秒后,同时输出三个字 I am  fangqianwen  
    

    所以await后跟的表达式不同,有两种处理结果
    1 对于promise对象,await会阻塞函数执行,等待promise的resolve返回值,作为await的结果,然后再执行下下一个表达式
    2 对于非promise对象,比如箭头函数,同步表达式等等,await等待函数或者直接量的返回,而不是等待其执行结果

           let f1=()=>{
                    return new Promise(
                        (resolve,reject)=>{
                            setTimeout(()=>{
                              console.log("病")
                              resolve("这是f1")   
                            },1000)
                        }
                    )
                }
                let f2=()=>{
                    return new Promise(
                        (resolve,reject)=>{
                            setTimeout(()=>{
                              console.log("隙")
                              resolve("这是f2")  
                            },1000)
                        }
                    )
                }
                let f3=()=>{
                    return new Promise(
                        (resolve,reject)=>{
                            setTimeout(()=>{
                              console.log("碎")
                              resolve("这是f3")  
                            },1000)
                        }
                    )
                }
                let f4=()=>{
                    return new Promise(
                        (resolve,reject)=>{
                            setTimeout(()=>{
                              console.log("笔")
                              resolve("这是f4") 
                            },1000)
                        }
                    )
                }
    
                let as=async ()=>{
    
                    let str1 = await f1();
                    let str2 =  await f2();
                    let str3 = await f3();
                    let str4 = await f4();
                    console.log(str1,str2,str3,str4)
                }
    
                as()
           
    
    image.png

    相关文章

      网友评论

        本文标题:await 后跟promise()与 普通函数的区别

        本文链接:https://www.haomeiwen.com/subject/rjkrtctx.html