JavaScript ES6 async/await的簡單學習demo

ovensi發表於2019-02-16
JavaScriptAI

傳統回撥函式

// 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 來執行看看

相關文章