Angularで処理が終わるまで待つ非同期処理について
Angularで処理が終わるまで待つ非同期処理について

Angularで処理が終わるまで待つ非同期処理について

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などの方法を使用して処理の完了を待つことができます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です