美文网首页
js callback, Promise, async+awai

js callback, Promise, async+awai

作者: 小白小白啦 | 来源:发表于2018-08-18 16:06 被阅读33次

    在B站上面学写小程序,里面有一节讲解js的回调函数,Promise, async+await通过例子讲解了三种方法的进化,我觉得讲的非常好,在此记录一下。

    普通代码

    function ajax(){
        setTimeout(() => {
            console.log('你好')
        }, 1000);
    }
    ajax()
    console.log('执行结束')
    

    执行上面的代码,输出结果

    D:\Document\MoocMpvue\koa-demo>node asyncawait.js
    执行结束
    你好
    

    可以看到先执行下面的代码,打印出“执行结束”,再去执行上面的代码'你好',和我们预期不一样。

    callback

    function ajax(fn){
        setTimeout(() => {
            console.log('你好')
            fn()
        }, 1000);
    }
    //callback 会出现回调地狱
    ajax(() => {
        console.log('执行结束')
    })
    

    输出结果

    D:\Document\MoocMpvue\koa-demo>node asyncawait.js
    你好
    执行结束
    

    通过回调函数可以解决函数执行顺序问题,但是会陷入回调地狱,造成代码层层嵌套,不容易阅读。

    Promise

    function delay(word){
        return new Promise((reslove, reject)=>{
            setTimeout(() => {
                reslove('hello' + word)
            }, 2000);
        })
    }
    delay("孙悟空")
        .then((word)=>{
            console.log(word)
            return delay('猪八戒')
        })
        .then((word)=>{
            console.log(word)
            return delay('沙悟净')
        })
        .then((word)=>{
            console.log(word)
        })
    

    执行结果

    D:\Document\MoocMpvue\koa-demo>node asyncawait.js
    hello孙悟空
    hello猪八戒
    hello沙悟净
    

    通过Promise消除了回调地狱,但是也会写很多的then,也不是很美观,终极解决方案async + await。

    async + await

    function delay(word){
        return new Promise((reslove, reject)=>{
            setTimeout(() => {
                reslove('hello' + word)
            }, 2000);
        })
    }
    
    async function start(){
        const word1 = await delay('孙悟空')
        console.log(word1)
    
        const word2 = await delay('猪八戒')
        console.log(word2)
    
        const word3 = await delay('沙悟净')
        console.log(word3)
    }
    start()
    

    输出结果

    D:\Document\MoocMpvue\koa-demo>node asyncawait.js
    hello孙悟空
    hello猪八戒
    hello沙悟净
    

    通过async + await代码变得整洁,和同步执行代码一样。

    相关文章

      网友评论

          本文标题:js callback, Promise, async+awai

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