Promise

検索…
Promise
Promise
Promiseクラスは、多くのモダンなJavaScriptエンジンに存在しており、簡単にpolyfillすることができます。Promiseを使いたい理由は、非同期/コールバック的なスタイルのコードに対して、同期処理の書き方でエラーを取り扱うことができるからです。
コールバックを用いたスタイルのコード
Promiseを完全に理解するため、信頼性の高い非同期処理をコールバックだけで構築する難しさをサンプルコードで示します。ファイルからJSONをロードする処理の非同期バージョンを作成するケースを考えてみましょう。これの同期処理バージョンは非常にシンプルです:
1
import fs = require('fs');
2
​
3
function loadJSONSync(filename: string) {
4
    return JSON.parse(fs.readFileSync(filename));
5
}
6
​
7
// 正しいjsonファイル
8
console.log(loadJSONSync('good.json'));
9
​
10
// 存在しないファイル: fs.readFileSync が失敗する
11
try {
12
    console.log(loadJSONSync('absent.json'));
13
}
14
catch (err) {
15
    console.log('absent.json error', err.message);
16
}
17
​
18
// 正しくないjsonファイル 例: ファイルは存在するが、JSON.parseが失敗する
19
try {
20
    console.log(loadJSONSync('invalid.json'));
21
}
22
catch (err) {
23
    console.log('invalid.json error', err.message);
24
}
Copied!
このシンプルなloadJSONSyncには有効な戻り値、ファイルシステムエラー、JSON.parseエラーの3種類の動作があります。私たちは、他の言語で同期処理を行う際に慣れていたように、単純なtry/catchでエラーを処理します。さて、このような関数について、良い関数を非同期バージョンで作ってみましょう。最初の素朴な試みとして作成した関数です。些細なエラーチェックのロジックを追加しています。:
1
import fs = require('fs');
2
​
3
// 最初に思いつくであろう試みですが、正しくありません. その理由は下で説明します
4
function loadJSON(filename: string, cb: (error: Error, data: any) => void) {
5
    fs.readFile(filename, function (err, data) {
6
        if (err) cb(err);
7
        else cb(null, JSON.parse(data));
8
    });
9
}
Copied!
十分にシンプルです。コールバックを引数に受け取り、ファイルシステムのエラーをコールバックに渡します。ファイルシステムのエラーがなければ、JSON.parseの結果を返します。コールバックに基づいて非同期関数を利用するときに注意すべき点は次のとおりです。
1.決してコールバックを2回呼ばないでください。
2.決して Error をthrowしないでください。
しかしながら、この単純な関数は2つ目の点に対応できません。実際にJSON.parseに間違ったJSONが渡されると、Error がthrowされ、コールバックが呼び出されず、アプリケーションがクラッシュします。これを以下の例で示します：
1
import fs = require('fs');
2
​
3
// 最初に思いつくであろう試みですが、正しくありません
4
function loadJSON(filename: string, cb: (error: Error, data: any) => void) {
5
    fs.readFile(filename, function (err, data) {
6
        if (err) cb(err);
7
        else cb(null, JSON.parse(data));
8
    });
9
}
10
​
11
// 正しくないJSONファイルのロード
12
loadJSON('invalid.json', function (err, data) {
13
    // このコードは永久に実行されません
14
    if (err) console.log('bad.json error', err.message);
15
    else console.log(data);
16
});
Copied!
これを修正するための素朴な試みは、次の例に示すようにJSON.parseをtry catchで囲むことです。
1
import fs = require('fs');
2
​
3
// より改善したバージョンです。しかし、まだ正しくありません。
4
function loadJSON(filename: string, cb: (error: Error) => void) {
5
    fs.readFile(filename, function (err, data) {
6
        if (err) {
7
            cb(err);
8
        }
9
        else {
10
            try {
11
                cb(null, JSON.parse(data));
12
            }
13
            catch (err) {
14
                cb(err);
15
            }
16
        }
17
    });
18
}
19
​
20
// 正しくないJSONファイルのロード
21
loadJSON('invalid.json', function (err, data) {
22
    if (err) console.log('bad.json error', err.message);
23
    else console.log(data);
24
});
Copied!
しかし、このコードには些細なバグがあります。もしコールバック(cb)が呼び出され、JSON.parseが呼び出されずに、エラーをthrowした場合、try/catchで囲んでいるため、catchが実行され、コールバックを再度呼び出してしまいます。つまり、コールバックが二度呼び出されてしまいます！これを以下の例で示します：
1
import fs = require('fs');
2
​
3
function loadJSON(filename: string, cb: (error: Error) => void) {
4
    fs.readFile(filename, function (err, data) {
5
        if (err) {
6
            cb(err);
7
        }
8
        else {
9
            try {
10
                cb(null, JSON.parse(data));
11
            }
12
            catch (err) {
13
                cb(err);
14
            }
15
        }
16
    });
17
}
18
​
19
// 正しいファイルですが、コールバックの呼び方が間違っています。２回呼び出されてしまいます！
20
loadJSON('good.json', function (err, data) {
21
    console.log('our callback called');
22
​
23
    if (err) console.log('Error:', err.message);
24
    else {
25
        // undefinedの値にアクセスすることによってエラーを再現します
26
        var foo;
27
        // このコードは `Error: undefined の'bar'プロパティを読み込めません` というエラーを表示します
28
        console.log(foo.bar);
29
    }
30
});
Copied!
1
$ node asyncbadcatchdemo.js
2
our callback called
3
our callback called
4
Error: undefined の'bar'プロパティを読み込めません
Copied!
これは、loadJSON関数が間違ってtryブロックでコールバックを囲んでいるためです。ここで覚えておくべき簡単な教訓があります。
シンプルな教訓：コールバックをコールするとき以外のすべての同期処理コードをtry catchで囲むこと。
このシンプルな教訓に基づいて、私達は完全に機能する非同期バージョンのloadJSONを作成できます：
1
import fs = require('fs');
2
​
3
function loadJSON(filename: string, cb: (error: Error) => void) {
4
    fs.readFile(filename, function (err, data) {
5
        if (err) return cb(err);
6
        // すべての同期処理コードをtry catchブロックに含める
7
        try {
8
            var parsed = JSON.parse(data);
9
        }
10
        catch (err) {
11
            return cb(err);
12
        }
13
        // コールバックを呼び出す時を除く
14
        return cb(null, parsed);
15
    });
16
}
Copied!
確かに何回か行えば、そう難しいことではありませんが、単に、良いエラー処理を書くためだけに、このような多くの定型的なコードが必要です。では、Promiseを使ってJavaScriptの非同期処理に取り組むための、より良い方法を見てみましょう。
Promiseを作る
Promiseの状態は、pending(保留中)またはfulfilled(履行済み)またはrejected(拒絶済み)のいずれかになります。
Promiseの宣言と運命
Promiseの作り方を見てみましょう。Promise(Promiseのコンストラクタ)に対してnewを呼び出すだけです。Promiseのコンストラクタには、Promiseの状態を決めるためのresolve関数とreject関数が渡されます。
1
const promise = new Promise((resolve, reject) => {
2
    // resolve / reject 関数がPromiseの運命を決定します
3
});
Copied!
Promiseの結果を監視(subscribing)する
Promiseの結果は、.then(resolveが実行された場合)または.catch(rejectが実行された場合)を使用して監視(Subscribe)できます。
1
const promise = new Promise((resolve, reject) => {
2
    resolve(123);
3
});
4
promise.then((res) => {
5
    console.log('I get called:', res === 123); // I get called: true
6
});
7
promise.catch((err) => {
8
    // これは呼び出されません
9
});
Copied!
1
const promise = new Promise((resolve, reject) => {
2
    reject(new Error("何かひどいことが起きた"));
3
});
4
promise.then((res) => {
5
    // これは呼び出されません
6
});
7
promise.catch((err) => {
8
    console.log('I get called:', err.message); // I get called: '何かひどいことが起きた'
9
});
Copied!
TIP：Promiseのショートカット
すでにresolveされているPromiseをクイックに作成する：Promise.resolve(result)
既にrejectされているPromiseをクイックに作成する： Promise.reject(error)
Promiseのチェーン
PromiseのチェーンはPromiseを使う最大のメリットです。一度Promiseを取得すれば、その時点から、then関数を使ってPromiseのチェーンを作れます。
もしチェーン内の関数からPromiseを返すと、そのPromiseがresolveされた時に1回だけ.thenが呼び出されます：
1
Promise.resolve(123)
2
    .then((res) => {
3
        console.log(res); // 123
4
        return 456;
5
    })
6
    .then((res) => {
7
        console.log(res); // 456
8
        return Promise.resolve(123); // resolveされたPromiseを返しています
9
    })
10
    .then((res) => {
11
        console.log(res); // 123 : resolveされた値で`then`が呼び出されます
12
        return 123;
13
    })
Copied!
チェーンの前の部分のエラー処理を単一のcatchに集約することができます：
1
// rejectされたPromiseを作成する
2
Promise.reject(new Error('何か悪いことが起きた'))
3
    .then((res) => {
4
        console.log(res); // 呼び出されない
5
        return 456;
6
    })
7
    .then((res) => {
8
        console.log(res); // 呼び出されない
9
        return 123;
10
    })
11
    .then((res) => {
12
        console.log(res); // 呼び出されない
13
        return 123;
14
    })
15
    .catch((err) => {
16
        console.log(err.message); // 何か悪いことが起きた
17
    });
Copied!
catchは実のところ新しいPromiseを返します(要するに新しいPromiseのチェーンを作成します)：
1
// rejectされたPromiseを作成する
2
Promise.reject(new Error('何か悪いことが起きた'))
3
    .then((res) => {
4
        console.log(res); // 呼び出されない
5
        return 456;
6
    })
7
    .catch((err) => {
8
        console.log(err.message); // 何か悪いことが起きた
9
        return 123;
10
    })
11
    .then((res) => {
12
        console.log(res); // 123
13
    })
Copied!
then(またはcatch)で同期エラーがスローされると、返されたPromiseが失敗します：
1
Promise.resolve(123)
2
    .then((res) => {
3
        throw new Error('何か悪いことが起きた'); // 同期処理でエラーを発生させる
4
        return 456;
5
    })
6
    .then((res) => {
7
        console.log(res); // 呼び出されない
8
        return Promise.resolve(789);
9
    })
10
    .catch((err) => {
11
        console.log(err.message); // 何か悪いことが起きた
12
    })
Copied!
エラーが発生すると関係している(後方で最も近い)catchだけがコールされます(同時にcatchが新しいPromiseのチェーンを作ります)。
1
Promise.resolve(123)
2
    .then((res) => {
3
        throw new Error('何か悪いことが起きた'); // 同期処理でエラーを発生させる
4
        return 456;
5
    })
6
    .catch((err) => {
7
        console.log('first catch: ' + err.message); // 何か悪いことが起きた
8
        return 123;
9
    })
10
    .then((res) => {
11
        console.log(res); // 123
12
        return Promise.resolve(789);
13
    })
14
    .catch((err) => {
15
        console.log('second catch: ' + err.message); // 呼び出されない
16
    })
Copied!
catchはチェーンの前部分でエラーが発生した場合にのみコールされます：
1
Promise.resolve(123)
2
    .then((res) => {
3
        return 456;
4
    })
5
    .catch((err) => {
6
        console.log("HERE"); // 呼び出されない
7
    })
Copied!
Promiseチェーンに関する事実：
エラーが起きた場合、後続のcatchにジャンプします(そして途中のthenはスキップします)
同期処理のエラーについても同様に、最も近い後続のcatchで捕捉されます
Promiseは、単なるコールバックに比べて優れたエラー処理を可能にする非同期プログラミングのパラダイムを我々に提供してくれます。さらに下記に詳しく記載します。
TypeScriptとPromise
TypeScriptが素晴らしい点は、それがPromiseチェーンを通じて流れる値を理解してくれることです。
1
Promise.resolve(123)
2
    .then((res) => {
3
         // res は `number` 型と推論される
4
         return true;
5
    })
6
    .then((res) => {
7
        // res は `boolean` 型と推論される
8
​
9
    });
Copied!
もちろん、Promiseを返す可能性のある関数呼び出しも理解してくれます。
1
function iReturnPromiseAfter1Second(): Promise<string> {
2
    return new Promise((resolve) => {
3
        setTimeout(() => resolve("Hello world!"), 1000);
4
    });
5
}
6
​
7
Promise.resolve(123)
8
    .then((res) => {
9
        // res は `number` 型と推論される
10
        return iReturnPromiseAfter1Second(); // `Promise<string>`を返す
11
    })
12
    .then((res) => {
13
        // res は `string` 型と推論される
14
        console.log(res); // Hello world!
15
    });
Copied!
コールバック関数からPromiseを返すように変更する
関数呼び出しをPromiseに包んで、下記のようにしてみましょう。
エラーが発生した場合は rejectを呼出す
すべてうまく行った場合はresolveを呼び出す
例えばfs.readFileをPromiseで囲んでみましょう：
1
import fs = require('fs');
2
function readFileAsync(filename: string): Promise<any> {
3
    return new Promise((resolve,reject) => {
4
        fs.readFile(filename,(err,result) => {
5
            if (err) reject(err);
6
            else resolve(result);
7
        });
8
    });
9
}
Copied!
JSONの例を見直す
次に、loadJSONの例を見直して、Promiseを使う非同期バージョンを書いてみましょう。やるべきことは、Promiseとしてファイル内容を読み、JSONとしてパースする、それだけです。これを以下の例で示します:
1
function loadJSONAsync(filename: string): Promise<any> {
2
    return readFileAsync(filename) // 直前に作成した関数を使います
3
                .then(function (res) {
4
                    return JSON.parse(res);
5
                });
6
}
Copied!
使い方(このセクションの始めに紹介した同期処理のコードとの違いに注目してください🌹)：
1
// 正しいjsonファイル
2
loadJSONAsync('good.json')
3
    .then(function (val) { console.log(val); })
4
    .catch(function (err) {
5
        console.log('good.json error', err.message); // 呼び出されない
6
    })
7
​
8
// 存在しないjsonファイル
9
    .then(function () {
10
        return loadJSONAsync('absent.json');
11
    })
12
    .then(function (val) { console.log(val); }) // 呼び出されない
13
    .catch(function (err) {
14
        console.log('absent.json error', err.message);
15
    })
16
​
17
// 正しくないjsonファイル
18
    .then(function () {
19
        return loadJSONAsync('invalid.json');
20
    })
21
    .then(function (val) { console.log(val); }) // 呼び出されない
22
    .catch(function (err) {
23
        console.log('bad.json error', err.message);
24
    });
Copied!
この関数がよりシンプルになった理由は、"loadFile(async)+JSON.parse(sync)=>catch"の連結をPromiseチェーンによって行ったためです。また、コールバックは我々ではなくPromiseチェーンによって呼び出されるので、コールバックをtry/catchで囲んでしまう誤りが起きる可能性はありませんでした。
並列制御フロー(Parallel control flow)
私たちは、Promiseを使って非同期タスクの順次処理（シーケンシャル処理）を行うことがいかに簡単かを見てきました。単にthenの呼び出しを連結するだけなのです。
しかし、複数の非同期処理を実行し、すべてのタスクが終わったタイミングで何らかの処理を行いたいケースがあるかもしれません。Promiseは静的なPromise.all関数を提供します。この関数は、n個のPromiseがすべて完了するまで待つことができます。n個のPromiseの配列を渡すと、n個の解決された値の配列を返します。以下では、Promiseチェーンの例と合わせて並列で処理する例を示します。
1
// 何らかのデータをサーバから読み込むことを再現する処理
2
function loadItem(id: number): Promise<{ id: number }> {
3
    return new Promise((resolve) => {
4
        console.log('loading item', id);
5
        setTimeout(() => { // サーバーからのレスポンス遅延を再現
6
            resolve({ id: id });
7
        }, 1000);
8
    });
9
}
10
​
11
// Promiseチェーン
12
let item1, item2;
13
loadItem(1)
14
    .then((res) => {
15
        item1 = res;
16
        return loadItem(2);
17
    })
18
    .then((res) => {
19
        item2 = res;
20
        console.log('done');
21
    }); // 全体で 2秒 かかる
22
​
23
// 並列処理
24
Promise.all([loadItem(1), loadItem(2)])
25
    .then((res) => {
26
        [item1, item2] = res;
27
        console.log('done');
28
    }); // 全体で 1秒 かかる
Copied!
ある場合には、複数の非同期タスクを実行するが、これらのタスクの内1つだけが完了すれば良いケースもあるでしょう。Promiseは、このユースケースに対してPromise.raceというStatic関数を提供しています：
1
var task1 = new Promise(function(resolve, reject) {
2
    setTimeout(resolve, 1000, 'one');
3
});
4
var task2 = new Promise(function(resolve, reject) {
5
    setTimeout(resolve, 2000, 'two');
6
});
7
​
8
Promise.race([task1, task2]).then(function(value) {
9
  console.log(value); // "one"
10
  // 両方ともresolveされるが、task1の方が早く終わる
11
});
Copied!
コールバック関数をPromiseに変換する
これを行うために信頼性が高い方法は、自分でコードを書くことです。例えばsetTimeoutをPromiseを使ったdelay関数に変換するのは非常に簡単です：
1
const delay = (ms: number) => new Promise(res => setTimeout(res, ms));
Copied!
NodeJSにはこれを行う便利で使いやすい関数があることを知っておいてください。これは コールバックスタイルの関数 => Promiseを返す関数 に変える魔法をかけてくれます。
1
/** 利用例 */
2
import fs = require('fs');
3
import util = require('util');
4
const readFile = util.promisify(fs.readFile);
Copied!
最終更新 1yr ago
リンクのコピー
Promise
コールバックを用いたスタイルのコード
Promiseを作る
Promiseの結果を監視(subscribing)する
Promiseのチェーン
TypeScriptとPromise
コールバック関数からPromiseを返すように変更する
JSONの例を見直す
並列制御フロー(Parallel control flow)
コールバック関数をPromiseに変換する