Contenu connexe
Similaire à Promiseでコールバック地獄から解放された話 (10)
Promiseでコールバック地獄から解放された話
- 2. はじめまして
• 杉浦 颯太(すぎうら そうた)と申します
• 2015年入社予定のクソザコ大学生です
• 現在はアルバイトとして働かせてもらっています
• 音楽好きです
• Twitter / GitHub: @sota1235
- 6. 例えば
• こんなコードが書きたい
• 「hoge APIを叩いて∼」
• 「その結果を元にリクエスト作ってmoge APIを叩いて∼」
• 「さらにその結果をもとにfuga APIを叩いて∼」
• 「それをページに表示させたいヾ(ó ｀o)ﾉ」
- 8. こうなる／(^０^)＼
$.get("http://api.hoge.com?hoge=hoge", function(err, hoge) {
if(err) {
console.error(err);
return;
}
$.get(“http://api.moge.com?moge="+hoge, function(err, moge) {
if(err) {
console.error(err);
return;
}
$.get(“http://api.fuga.com?fuga="+moge, function(err, fuga) {
if(err) {
console.error(err);
return;
}
$('body').val(fuga);
});
});
});
- 12. Promise is 何
• 非同期処理の結果を抱え込むオブジェクト
• 処理の結果に影響されることなく値を返す約束手形を渡してくれる
のがPromiseオブジェクト
• この約束手形をつないだりすることでネストが深くなるのが防げ
る
• また、処理の順序等の制御が簡単になる
- 15. Promise化された関数
/* not Promise */
var func = function(num, callback) {
if(num % 2 == 0) {
callback(null, num / 2);
} else {
callback("Error", null);
}
}
!
/* Promise */
var pfunc = function(num) {
var promise = new Promise(function(resolve, reject) {
if(num % 2 == 0) {
resolve(num / 2); // success
} else {
reject(“Error"); // failure
}
});
return promise;
}
- 16. Promise化された関数を使う
/* not Promise */
func(4, function(err, result) {
if(err) {
console.error(err);
return;
}
console.log(result);
});
!
/* Promise */
pfunc.then(function(result) {
console.log(result); // success
}).catch(function(err) {
console.error(err); // failure
});
- 20. .all()
var p1 = new Promise(function(resolve, reject) { resolve(“1”); });
var p2 = new Promise(function(resolve, reject) { resolve(“2”); });
var promises = [p1, p2];
Promise.all(promises).then(function(results) {
console.log(results); // [1, 2]
});
- 22. var p1 = new Promise(function(resolve, reject) { resolve("1"); });
var p2 = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve("2");
}, 1000);
});
var promises = [p1, p2];
Promise.race(promises).then(function(result) {
console.log(result); // 1
});
.race()
- 28. 関数化 & Promise化(hoge API)
var hoge = function() {
return new Promise(function(resolve, reject) {
$.get("http://api.hoge.com?hoge=hoge", function(err, hoge) {
if(err) reject(err);
resolve(hoge);
});
});
}
- 29. 関数化 & Promise化(moge/fuga API)
var moge = function(hoge) {
return new Promise(function(resolve, reject) {
$.get("http://api.moge.com?moge"+hoge, function(err, moge) {
if(err) reject(err);
resolve(moge);
});
});
}
var fuga = function(moge) {
return new Promise(function(resolve, reject) {
$.get("http://api.fuga.com?fuga"+moge, function(err, fuga) {
if(err) reject(err);
resolve(fuga);
});
});
}
