IEでPromiseを利用する

Promiseとは

Promiseは非同期処理を綺麗に書けるAPIです。
従来は複数の非同期処理を繋げるとコールバック地獄に陥ってしまいがちでしたが、Promiseを利用することで可読性の高いコードを実装することが出来るかと思います。

Promiseについては他の記事が沢山ありますので割愛します。
詳細を学ばれたい方は、@azu氏の Promiseの本 が解りやすいのでおすすめです。

各ブラウザの対応状況

各ブラウザの対応状況はこちらで確認できます。
主要なブラウザは対応しているため問題ありませんが、残念ながらIEは未対応です。

IEでPromiseを動作させる

IEなどのブラウザでPromiseに対応させる方法はいくつか有りますが、polyfillを読み込む方法が楽かと思います。
polyfillも複数ありますが、個人的には es6-promise がおすすめです。
browserifyやwebpackなどで読み込んでしまうのが良いでしょう。

IE8以下での注意点

Promiseで非同期処理の結果を受け取る場合、通常は以下のようになるかと思います。
しかしIE8以下では.catch()を使うとエラーとなるため、避ける必要があります。
(catchは予約語なので、IE8以下では利用できないのが原因のようです。)

promise.then(function onFulfilled(value){
    console.log(value);
}).catch(function onRejected(error){ // Syntax Error
    console.error(error);
});

手っ取り早く解決するには、.catchを["catch"]に置き換えれば良いでしょう。

promise.then(function onFulfilled(value){
    console.log(value);
})["catch"](function onRejected(error){
    console.error(error);
});

.catch()を使わず、.then()で繋げることも可能です。

promise.then(function onFulfilled(value) {
  console.log(value);
}).then(undefined, function onRejected(error) {
  console.log(error);
});

以下の実装でも動作しますが、onFulfilled で例外が発生した際に onRejected が呼ばれないため注意が必要です。

promise.then(function onFulfilled(value) {
  throw new Error(value); // ここで例外が発生しても
}, function onRejected(error) {
  console.log(error); // この関数は呼ばれない
});