Observable とは
- Observer パターンの Subject
- subscriber へ値を publish する処理が本体で、subscriber が subscribe すると処理が実行される
- サーバーにリクエストを出して受け取ったレスポンスを publish する処理を Observable で実装し、レスポンスを扱う処理を subscriber で実装したりする
// Observable の作成
const observable = new Observable(subscriber => {
// subscriber に値 1 を publish する
subscriber.next(1);
subscriber.next(2);
subscriber.next(3);
setTimeout(() => {
subscriber.next(4);
// subscriber に処理の終了を通知する
subscriber.complete();
}, 1000);
});
console.log('just before subscribe');
// subscriber の定義
observable.subscribe({
// Observable から publish した値を処理する
next(x) { console.log('got value ' + x); },
// エラーハンドリング
error(err) { console.error('something wrong occurred: ' + err); },
// 終了時の処理
complete() { console.log('done'); }
});
console.log('just after subscribe');
Promise とは
- 非同期で実行される処理のオブジェクト
- 非同期で実行される処理が本体で、then あるいは catch メソッドで成功時あるいは失敗時の返り値を処理することができる
// Promise の作成
const promise = new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com');
// resolve で成功時のコールバック関数を実行する
xhr.onload = () => resolve(xhr.responseText);
// reject で失敗時のコールバック関数を実行する
xhr.onerror = () => reject(xhr.statusText);
xhr.send();
});
// Promise の利用
promise
// then で成功時のコールバック関数を定義する
.then((res) => { console.log(res); })
// catch で失敗時のコールバック関数を定義する
.catch((e) => { console.log('ERROR: ' + e); });
async, await とは
- Promise を扱うためのシンタックスシュガー
-
async functionとして定義された関数を実行すると Promise を返す- トップレベル関数で非同期関数の定義ができて便利
-
await promise()として Promise を実行すると Promise の終了まで処理を待つ- 実行したい Promise が複数あったとき then でチェーンするよりも読みやすい
// async を使わずに Promise を返す関数を定義する
function resolveAfter2Seconds() {
return new Promise(resolve => {
setTimeout(() => {
resolve('resolved');
}, 2000);
});
}
// async を使うと Promise を返す関数の定義が簡単
async function asyncCall() {
console.log('calling');
// await を使って Promise の実行を待つ
const result = await resolveAfter2Seconds();
console.log(result);
// expected output: 'resolved'
}
asyncCall();