Javascript Promiseとasync/await

Promiseとasync/await

Promiseとは

• 非同期処理を統一的に扱う方法を定義したオブジェクト。
• Promiseを使えばネストが深いコールバック嵐から解放される。

async/awaitとは

• ES2016+から導入されたasync関数と、await演算子。
• await/asyncを使うにはPromiseから習得する必要がある。
• await演算子はPromiseの処理が完了するのを待機するために使うもので、async関数（async function）内でのみ有効となる。

Promiseとasync/awaitの違い

• Promiseは、非同期の処理を上手く同期的に見せたり、並列処理が出来るメソッド。await/asyncは非同期処理を同期的に行うため直列の処理をするもの。書き方が違う。
• Promiseを使うと、「非同期の処理」、「結果の処理」といったように処理を分けて書くことができるが、.then()メソッドの連鎖の部分は、処理が多くなると複雑になっていく。Promiseをよりシンプルに書けるようにするために、追加されることになったのが「async/await」。

async/awaitの使い方

• awaitでPromiseの完了を待つことが出来る。そのため、awaitの後続処理を同期的に処理を記述できる。またawaitはasync functionからだけ呼ぶことが出来る。

// Promiseを作成
function testFunc(num, cb) {
    return new Promise((resolve, reject) => {
        return cb(resolve, reject, num);
    });
}

// 非同期処理
function target(resolve, reject, num) {
    return setTimeout(() => {
        try {
            if (num) {
                return resolve(num + num);
            }
            return reject('error!!!!!!');
        } catch(err) {
            return reject(err);
        }
    }, 100);
}

// 非同期処理の結果を用いた処理（async/await）
async function testAsync() {
    try {
        const a1 = await testFunc(1, target); // => 1 + 1
        const a2 = await testFunc(a1, target); // => 2 + 2
        const a3 = await testFunc(a2, target); // => 4 + 4
        return console.log(a3); // => 8
    } catch(err) {
        return console.error(`error: ${err}`);
    }
}

// async関数の実行
testAsync().catch(
    err => console.error(`error: ${err}`)
); // => 8