Samples to understand the asynchronous processing of JavaScript.

asyncproc.js

// JavaScript の非同期処理を理解するためのサンプル

const getThisYear = (callback) => {
    setTimeout(() => callback(null, new Date().getFullYear()), 100);
}

const getNextYear = (year, callback) => {
    setTimeout(() => callback(null, ++year), 100);
}

// Callback を利用した非同期処理 (Callback hell)
// Arrow Function、エラー処理入のCallback 処理
getThisYear((error, year) => {
    if (error) {
        console.error(error);
        return;
    }
    getNextYear(year, (error, nextyear) => {
        if (error) {
            console.error(error);
            return;
        }
        getNextYear(nextyear, (error, afternextyear) => {
            if (error) {
                console.error(error);
                return;
            }
            console.log(`Arrow: This year is ${year}`);
            console.log(`Arrow: Next year is ${nextyear}`);
            console.log(`Arrow: After Next year is ${afternextyear}`);
        });
    });
});


// 参考: 関数宣言の場合の書き方 (Error 処理なし)
getThisYear(function (error, year) {
    getNextYear(year, function (error, nextyear) {
        getNextYear(nextyear, function (error, afternextyear) {
            console.log(`Function: This year is ${year}`);
            console.log(`Function: Next year is ${nextyear}`);
            console.log(`Function: After Next year is ${afternextyear}`);
        });
    });
});


// Promise による非同期処理
// 元の関数をPromise 化 (自力)
const getThisYearAsync = () => {
    return new Promise(function(resolve, reject) {
        getThisYear((error, year) => {
            if (error) reject(error);
            resolve(year);
        });
    });
}
const getNextYearAsync = (year) => {
    return new Promise(function(resolve, reject) {
        getNextYear(year, (error, nextyear) => {
            if (error) reject(error);
            resolve(nextyear);
        });
    });
}

let thisyear, nextyear, afternextyear

getThisYearAsync()
.then(year => {
    thisyear = year;
    return getNextYearAsync(year);
})
.then(year => {
    nextyear = year;
    return getNextYearAsync(year);
})
.then(year => {
    afternextyear = year;
    console.log(`Promise: This year is ${thisyear}`);
    console.log(`Promise: Next year is ${nextyear}`);
    console.log(`Promise: After Next year is ${afternextyear}`);
})
.catch(error => console.log(error));

// util.promisify を利用したPromise 化
const util = require('util');
const getThisYearAsyncByUtil = util.promisify(getThisYear);
const getNextYearAsyncByUtil = util.promisify(getNextYear);

getThisYearAsyncByUtil()
.then(year => {
    thisyear = year;
    return getNextYearAsyncByUtil(year);
})
.then(year => {
    nextyear = year;
    return getNextYearAsyncByUtil(year);
})
.then(year => {
    afternextyear = year;
    console.log(`Promise Util: This year is ${thisyear}`);
    console.log(`Promise Util: Next year is ${nextyear}`);
    console.log(`Promise Util: After Next year is ${afternextyear}`);
})
.catch(error => console.error(error));


// async / await の利用

(async () => {
    let thisyear = await getThisYearAsync();
    let nextyear = await getNextYearAsync(thisyear);
    let afternextyear = await getNextYearAsync(nextyear);
    console.log(`async/await: This year is ${thisyear}`);
    console.log(`async/await: Next year is ${nextyear}`);
    console.log(`async/await: After Next year is ${afternextyear}`);
})()
.catch(error => console.error(error));

// async / await の利用2 async 関数作成後にコールする

const getYears = async () => {
    let thisyear = await getThisYearAsync();
    let nextyear = await getNextYearAsync(thisyear);
    let afternextyear = await getNextYearAsync(nextyear);
    console.log(`async/await2: This year is ${thisyear}`);
    console.log(`async/await2: Next year is ${nextyear}`);
    console.log(`async/await2: After Next year is ${afternextyear}`);

}

getYears()
.then(() => console.log("Done"))
.catch(error => console.error(error));