普段Angularで開発をしており、半ば惰性で利用していた Promise
についていろいろ記事を読んでいて、なんとなく復習していたら、まとめておきたくなったので適当にまとめました。
Promiseとは
- Promise インターフェースは作成時点では分からなくてもよい値へのプロキシ
- Promise は3種類の状態を持つ
- 非同期のコードがコールバック地獄になるのを防いでくれる
メソッド | 内容 | ざっくり使いどころ |
---|---|---|
Promise.all() | Promiseオブジェクトの配列を受け取り、全てのPromiseオブジェクトがresolveされたタイミングでthenが呼び出される | 並行で非同期処理を制御するとき |
Promise.race() | Promiseオブジェクトの配列を受け取り、一つでもresolve, rejectが呼び出されたら、thenもしくはcatchが呼びされる | 並行で非同期処理を制御するとき |
Promise.resolve() | 与えられた理由(reason)で失敗となる Promise オブジェクトを返す | 逐次処理(直列処理)するとき |
Promise.reject() | 与えられた理由(reason)で失敗となる Promise オブジェクトを生成する | テストコードやデバッグ、一貫性を保つとき |
わかりやすいサイトを列挙しました。全部読んでいくと雰囲気は掴めると思います。
- mozillaでのPromise
- Promiseについて0から勉強してみた
- Promiseと仲良くなって気持ち良く非同期処理を書こう
- Promiseで簡単!JavaScript非同期処理入門【前編】
- Promiseで簡単!JavaScript非同期処理入門【後編】
HackerNews APIを使って実装してみた
Hacker Newsというサイトがあります。
これは、Y Combinator という有名なVCが運営している、ユーザ投稿型のニュースサイトです。
このサイトは実は、APIが誰でも利用可能です。
- HackerNewsAPIでtop storyのうち適当に一つのStory IDを取得する
- 1.のStoryIDに基づき記事内容のjsonを取得する
というのをやってみます。
const https = require('https');
const TOP_STORY_URL = 'https://hacker-news.firebaseio.com/v0/topstories.json';
var getHackerNewsTopStoryID = () => {
return new Promise((resolve, reject) => {
https.get(TOP_STORY_URL, (res) => {
let body = '';
res.setEncoding('utf8');
res.on('data', (chunk) => {
body += chunk;
});
res.on('end', (res) => {
res = JSON.parse(body);
// console.log(res);
resolve(res[0]); // 適当に0にしている。
});
}).on('error', (e) => { //エラー時
reject(e.message);
});
});
}
var getHackerNewsStoryDetailByID = (hackerNewsID) => {
return new Promise((resolve, reject) => {
// Hacker NewsのAPIを叩く。
const INDIV_STORY_URL = `https://hacker-news.firebaseio.com/v0/item/${hackerNewsID}.json?print=pretty`
https.get(INDIV_STORY_URL, (res) => {
let body = '';
res.setEncoding('utf8');
res.on('data', (chunk) => {
body += chunk;
});
res.on('end', (res) => {
res = JSON.parse(body);
console.log(res);
resolve(res);
});
}).on('error', (e) => { //エラー時
reject(e.message);
});
});
}
const story = getHackerNewsTopStoryID()
.then( (id) => { return id;})
.then(getHackerNewsStoryDetailByID);
console.log(story);
ネストが深くならずに、記述できました。