美文网首页
JavaScript ES6 async/await的简单学习d

JavaScript ES6 async/await的简单学习d

作者: 红豆稀饭_a071 | 来源:发表于2019-01-29 16:57 被阅读0次

    传统回调函数

    // demo1-callback.js
    /**
        现在我们要做个事情,写个回调函数,每秒输出一个递增的数字,输出三次
        普通回调函数的写法
     */
    function logNumber(n, callback){
        setTimeout(() => {
            console.log(n);
            n++;
            callback(n)
        }, 1000);
    }
    //  现在调用它
    logNumber(1, function(n){
        logNumber(n, function(m){
            logNumber(m, function(q){
                
            })
        })
    })
    

    Promise

    // demo2-promise.js
    /**
        现在我们改用promise来重写demo1的函数
     */
    // 我们在这里暴露那个promise以供demo3调用
    function generatorLogNumber(n){
        return new Promise(res => {
            setTimeout(() => {
                console.log(n);
                n++;
                res(n)
            }, 1000);
        })
    }
    // 现在使用它
    generatorLogNumber(1)
        .then(n => {
            generatorLogNumber(n)
            .then(m => {
                generatorLogNumber(m)
                .then(q => {
    
                })
            })
        })
    // 这里把这个promise暴露出去以供demo3使用,记得把本demo的调用函数注释掉(就是15-24行注释掉)
    module.exports = generatorLogNumber;
    

    async/await

    // demo3-async-await.js
    /**
        现在我们改用更加方便的async/await方式来调用demo2的promise
     */
    //  首先把那个promise引入进来
    const generatorLogNumber = require('./demo2-promise.js');
    
    (async () => {//双括号表示立即执行的匿名函数
        const n = await generatorLogNumber(1);
        const m = await generatorLogNumber(n);
        const q = await generatorLogNumber(m);
    })()
    // 可以node demo3-async-await.js 来运行看看
    

    相关文章

      网友评论

          本文标题:JavaScript ES6 async/await的简单学习d

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