Promise処理
https://gyazo.com/88ba3541eaf1d7c92be901bf1980dd8e
簡単に言うと非同期処理を行う時にコールバック地獄、ネストの深層化を回避して記述をだいぶ楽にするオブジェクト。
非同期処理とは
例えばAの処理の後にBの処理があるとする。
JavaScriptとはシングルスレッドで動く＝同時に処理を行うということができないものなので、通常であればA、Bの処理で動く。 その辺の順番を変えて処理を行うのを非同期処理という。
分かりやすい例はApiと連携するAjax通信を受け取ったレスポンス(200とか404とか)の結果によって処理を行うやつ。
非同期処理の例
setTimeout
setInterval
addEventListener（イベントハンドラ）
jQuery.Deferred
Promise ←これ
code:例 – ajax通信後順番に処理を行う.js
var fetchSomething1 = function(done) {
// API1にアクセス
doAjaxStuff(someOptions, {
success: function(data) {
done(); // 成功したら渡されたfunctionを実行
}
});
};
// fetchSomething1と同じようにそれぞれ別のAPIにアクセスするfunction群
var fetchSomething2 = function(done) { /* 省略 */ };
var fetchSomething3 = function(done) { /* 省略 */ };
var fetchSomething4 = function(done) { /* 省略 */ };
var doSomethingFinally = function() {
// APIにアクセスして取得してきたデータを使って何かする
};
こういう関数を登録しておき、順番に処理を行うとする。通常だと
code:通常.js
fetchSomething1(function() {
fetchSomething2(function() {
fetchSomething3(function() {
fetchSomething4(doSomethingFinally);
});
});
});
こうなるが、これが
code:Promise.js
fetchSomething1()
.then(fetchSomething2)
.then(fetchSomething3)
.then(fetchSomething4)
.then(doSomethingFinally);
こうなる。
コールバック地獄、ネスト深層化問題の回避がよく分かる。
code:コールバック地獄.js
// Callback
fetchSomething1(function() {
fetchSomething2(function() {
fetchSomething3(function() {
fetchSomething4(doSomethingFinally, function() {
// fetchSomething4のエラー処理
});
}, function() {
// fetchSomething3のエラー処理
});
}, function() {
// fetchSomething2のエラー処理
});
}, function() {
// fetchSomething1のエラー処理
});
code:Promise then & catch.js
fetchSomething1()
.then(fetchSomething2)
.catch(/* fetchSomething1のエラー処理 */);
.then(fetchSomething3)
.catch(/* fetchSomething2のエラー処理 */);
.then(fetchSomething4)
.catch(/* fetchSomething3のエラー処理 */);
.then(doSomethingFinally)
.catch(/* fetchSomething4のエラー処理 */);
エラー処理も含めると更に分かりやすくなる。こういう風に書くと見やすくなってメンテナンス性も上がりますね。
https://gyazo.com/27f6663a05cf677796e44911a766c161
発表されてからだいぶ時間が経ったのでブラウザ対応であれば、現状IE11以外だったら大丈夫。