Edited at

IEでPromiseを利用する

More than 1 year has passed since last update.


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); // この関数は呼ばれない
});