Help us understand the problem. What is going on with this article?

IEでPromiseを利用する

More than 3 years have 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); // この関数は呼ばれない
});
nanocloudx
Web Application Developer
https://wwww.dev
abeja
「ディープラーニング」を活用し、多様な業界、シーンにおけるビジネスの効率化・自動化を促進するベンチャー企業です。
https://abejainc.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away