JavaScript ES6 async/await的简朴进修demo

2024年5月22日 255次阅读 来源: ovensi

传统回调函数

// 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 来运转看看
    原文作者：ovensi
    原文地址: https://segmentfault.com/a/1190000018058443
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞