Promiseとasync/awaitでの非同期処理

非同期処理

毎回理解できた気になるけど、他人のコード見るたびに「こんな書き方あるんだ…」、「これなんのための記述…」ってなる…

もう書き尽くされたお題だと思いますが、自分のためにアウトプットします。すみません。

とりあえずやってみたいこと

test1.txtを読み込んでファイル名を取得して、次のファイルを読んで…を繰り返して最終的にtest3.txtの内容を出力してみる。

test1.txt

./test2.txt

test2.txt

./test3.txt

test3.txt

Hello World!

実行結果は全部これです。

実行結果

> node .\index.js
./test2.txt
./test3.txt
Hello World!

コールバック

昔からあるコールバックで実現しようとすると

function func() {
    // 1つ目のファイルの読み込み
    fs.readFile('./test1.txt', 'utf-8', (err1, data1) => {
        console.log(data1);

        // 2つ目のファイルの読み込み
        fs.readFile(data1, 'utf-8', (err2, data2) => {
            console.log(data2);

            // 3つ目のファイルの読み込み
            fs.readFile(data2, 'utf-8', (err3, data3) => {
                console.log(data3);
            })
        })
    })
}

コールバックが深くなると見づらくなる

Promise

処理をまとめて、Promiseを返すようにしてみる

function func(file) {
    return new Promise((resolve, reject) => {
        fs.readFile(file, 'utf-8', (err, data) => {
            console.log(data);
            resolve(data);
        })
    });
}

func('./test1.txt')
    .then(func)
    .then(func);

Promiseが解決してresolveが返ってくると、thenが実行される
thenメソッドの引数は関数
そしてその関数の第一引数にはresolveの値が入る

けど、2回目以降のfuncに引数がなくて違和感がすごい

ちなみに

function func(file) {
    return new Promise((resolve, reject) => {
        fs.readFile(file, 'utf-8', (err, data) => {
            console.log(data);
            resolve(data);
        })
    });
}

Promise.resolve('./test1.txt')
    .then(func)
    .then(func)
    .then(func);

使い分けがよくわかっていない

以下の記事にnew Promise()とPromise.resolve()の使い分けが書いてあるが、まだいまいち理解できていない
return new Promise()とreturn Promise.resolve()使い分け

混ざってむちゃくちゃ

function func(file) {
    return new Promise((resolve, reject) => {
        fs.readFile(file, 'utf-8', (err, data) => {
            console.log(data);
            resolve(data);
        })
    });
}

func('./test1.txt')
    .then(async (data1) => {
        let data2 = await func(data1)
        return data2
    })
    .then(data2 => {
        func(data2)
    });

thenの中でいろいろしたい時はこれでもいいのかも

async/await

function func(file) {
    return new Promise((resolve, reject) => {
        fs.readFile(file, 'utf-8', (err, data) => {
            console.log(data);
            resolve(data);
        })
    });
}

(async () => {
    let data1 = await func('./test1.txt');
    let data2 = await func(data1);
    func(data2)
})();

圧倒的に理解しやすい

まとめ

書いてるときは理解できた気になるけど、他人のコード解読するのは難しい