Angularにおいて非同期処理を扱う際にはPromiseやObservablesasync/awaitなどの方法があります。それぞれの方法で待つ処理の例をいくつか紹介します。
Promiseを利用した非同期処理
Promiseを使用する場合thenやcatchメソッドを使って処理の成功・失敗をハンドリングします。
function getData(): Promise<any> {
return new Promise((resolve, reject) => {
// 非同期処理
setTimeout(() => {
const data = 'Some data';
resolve(data);
}, 2000);
});
}
getData()
.then(data => {
console.log(data);
// Some data
})
.catch(error => {
console.log(error);
});この例では2秒後に”data”という文字列をPromiseによって返しています。その後Promiseを使用して非同期処理が完了するまで待ち成功時には”data”という文字列をコンソールに表示します。
Observablesを利用した非同期処理
Observablesを使用する場合subscribeメソッドを使用してデータを取得し処理の成功・失敗をハンドリングします。
import { Observable } from 'rxjs';
function getData(): Observable<any> {
return new Observable(observer => {
// 非同期処理
setTimeout(() => {
const data = 'Some data';
observer.next(data);
}, 2000);
});
}
getData().subscribe(
data => {
console.log(data);
// Some data
},
error => {
console.log(error);
}
);この例ではPromiseと同じように2秒後に”data”という文字列をObservablesによって返しています。その後Observablesを使用して非同期処理が完了するまで待ち成功時には”data”という文字列をコンソールに表示します。
async/awaitを利用した非同期処理
async/awaitを使用する場合asyncキーワードを使用して関数を定義しawaitキーワードを使用して非同期処理が完了するまで待ちます。
async function getData(): Promise<any> {
return new Promise(resolve => {
// 非同期処理
setTimeout(() => {
const data = 'Some data';
resolve(data);
}, 2000);
});
}
async function main() {
const data = await getData();
console.log(data);
// Some data
}
main();
この例では2秒後に”data”という文字列をPromiseによって返しています。その後async/awaitを使用して非同期処理が完了するまで待ち成功時には”data”という文字列をコンソールに表示します。
まとめ
以上がAngularにおける非同期処理で待つ処理の例です。
PromiseObservablesasync/awaitなどの方法を使用して処理の完了を待つことができます。