非同期をわかりやすく制御しよう!ES6の「Promise」入門

非同期をわかりやすく制御しよう!ES6の「Promise」入門

先生

先生

(編集部注*2015年10月28日に公開された記事を再編集したものです。)

カメラを新調して写真撮りまくってます。CTOの林です。
ブラウザでの対応が進んできたこともあり、ES6がかなり注目されてきています。今日はその中でも「Promise」について簡単に解説していきたいと思います。

Promiseとは

Promiseは、非同期の処理をわかりやすく制御するオブジェクトで、ES6(ES2015/ECMAScript 2015)に追加された機能の1つです。

 
スクリーンショット 2016-06-07 19.12.57
http://caniuse.com/#feat=promises

現在は、多くのブラウザですでに実装されています。

また、多くのPolyfillが作られているため、非対応のIEでもPromiseを使うことができます。

JavaScriptでは多くの非同期処理をします。とくに、Node.jsでは非同期をうまく制御することが開発の肝と言っても過言ではないくらい多くの処理が非同期で行われます。かつてはDefferdやAsyncといったライブラリを使ってこれらを制御していましたが、それをネイティブで対応できるようになったものがPromiseです。

では、さっそくPromiseの使い方を見てみましょう。

Promiseの使い方

var p = new Promise(function(resolve,reject) {
    window.setTimeout(function() {
        resolve(true);
        //reject('error');
    },1000);
});
p.then(function(result) {
    console.log('OK:' + result);
}, function(e) {
    console.log('NG:' + e);
});

Promiseはnewして使います。また第一引数に関数を必ず指定をします。関数内では成功時の処理(resolve)と失敗時の処理(reject)を実行する引数が取得できます。

resolve(渡したい値);    // 成功時
reject(渡したい値);        // 失敗時

newされたPromiseは then(onFulfilled,onRejected),catch(onRejected) という関数を持つオブジェクトを返します。

thenは第一引数にresolveされたときの処理を、第二引数にrejectされたときの処理をそれぞれ受け取ります。先ほどのサンプルコードでは以下の部分がそれに当たるところです。

p.then(function(result) {
    console.log('OK:' + result);
}, function(e) {
    console.log('NG:' + e);
});

catchは失敗時の処理だけを受け取ることができます。上記は、下記のように記述しても同じ結果となります。

p.then(function(result) {
    console.log('OK:' + result);
}).catch(function(e) {
    console.log('NG:' + e);
});

catchはエラーの処理が明確になるだけでなく、後述していく複数の非同期処理のエラーをまとめて制御するためにも使用されるので、基本的にはcatchを使って失敗時の処理を記述することをオススメします。

この記事のシェア数

58

先生
先生 最高技術責任者 / 林 優一

CTOの林です。フロントエンドを専門とし、AngularJSのコミュニティをはじめ、様々な勉強会に顔を出しています。効率化マニアでGrunt,Gulpをはじめ、プロジェクト進行やサーバーサイド、インフラ周りの効率化を目指し日々活動しています。 【役職紹介 / CTO】 Web制作にかかる内容を統括しています。プロジェクトを横断的に見渡し、技術的な見地からアドバイスなどを行い、ときには実制作のヘルプを行ったりしています。新人エンジニアの育成や、体外的な活動としてLIG全体のエンジニアのブランディングのため勉強会やイベントへの登壇・開催なども行っています。 【普段やっていること】 新規サービスの設計(UI,遷移,DB,APIなど)、エンジニアの育成及び環境整備、技術選定、Web制作ユニットの統括とプロジェクト進行を円滑にするための仕組みづくり、フロントエンド周りの実装、エンジニアリングの開発効率化、勉強会の登壇・主催など