TypeScriptでPromiseを使う

執筆時のバージョン

> tsc --version
Version 2.1.6

定義ファイルのインストール

定義ファイルは、以下のようにnpmで直接インストールすることができます。

npm install --save @types/es6-promise

Promiseを使う

// Promise<T>のTはresolveの引数の型
const p1 = new Promise<string>((resolve: (value?: string) => void, reject: (reason?: any) => void) => {
    // 非同期の処理
    // 成功したときは戻り値を引数にしてresolveを呼ぶ
    // 失敗したときは戻り値を引数にしてrejectを呼ぶ
    setTimeout(() => {
        resolve("OK");  // 成功したときの戻り値
    }, 1000);
}).then(
    // Promiseが成功したとき
    (value: string) => { // 引数valueの型はProcese<T>のT型
        console.log(value);
    }
).catch(
    // Promiseが失敗したとき
    (reason: any) => {
        console.log(reason);
    }
);

Promiseのコンストラクタは、関数を引数に取ります。
引数の関数は、resolveとrejectを引数に取り、戻り値はありません。
resolveとrejectはどちらも関数です。

const p1 = new Promise<string>(
    (resolve: (value?: string) => void, reject: (reason?: any) => void) => {
});

Promiseの型引数Tはresolveの引数の型です。

引数の関数の中で、非同期処理を実行します。
処理が成功したら、戻り値を引数にしてresolve()を呼びます。
失敗したときは、エラーの内容を引数にしてreject()を呼びます。

const p1 = new Promise<string>(
    (resolve: (value?: string) => void, reject: (reason?: any) => void) => {
    // 非同期の処理
    // 成功したときは戻り値を引数にしてresolveを呼ぶ
    // 失敗したときは戻り値を引数にしてrejectを呼ぶ
    setTimeout(() => {
        resolve("OK");  // 成功したときの戻り値
    }, 1000);
});

then()メソッドに、処理が成功したときに実行するコールバック関数を登録します。
関数の引数の型は、Promiseで指定したT型です。

const p1 = new Promise<string>((resolve: (value?: string) => void, reject: (reason?: any) => void) => {
    // 非同期の処理
}).then(
    // Promiseが成功したとき
    (value: string) => { // 引数valueの型はProcese<T>のT型
        console.log(value);
    }
);

catch()メソッドに、処理が失敗したときに実行するコールバック関数を登録します。

const p1 = new Promise<string>((resolve: (value?: string) => void, reject: (reason?: any) => void) => {
    // 非同期の処理
}).catch(
    // Promiseが失敗したとき
    (reason: any) => {
        console.log(reason);
    }
);

Promise.all

複数の非同期処理がすべて終わったときに処理を行いたいときは、Promise.all()を使用します。

Promise.all()はPromiseオブジェクトの配列を受け取ります。
すべてのPromiseオブジェクトがresolveされると、then()メソッドを呼びます。

サンプルコード

Promise.all([
    // Promiseオブジェクトの配列
    new Promise((resolve, reject) => { setTimeout(() => resolve("1"), 1000); }),
    new Promise((resolve, reject) => { setTimeout(() => resolve("2"), 2000); }),
    new Promise((resolve, reject) => { setTimeout(() => resolve("3"), 3000); }),
]).then(
    // すべてのPromiseオブジェクトがresolveされた後に呼ばれる
    value => console.log(value)
);

実行結果

[ '1', '2', '3' ]

コメント

  1. Pingback: Ionic3+Firebaseでメールアドレス認証を写経してみる(2)BitBucketに非公開登録し、Netlifyで公開とfirebaseの設定

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください