JavaScriptのPromiseオブジェクトを使った非同期処理の実装方法について解説します。
![](https://tech.mychma.com/wp-content/uploads/2022/05/hukidashi2_nayamu.png)
非同期処理をするにはどうしたらいいですか?
![](https://tech.mychma.com/wp-content/uploads/2022/05/hukidashi1_normal.png)
![](https://tech.mychma.com/wp-content/uploads/2022/05/hukidashi1_normal.png)
![](https://tech.mychma.com/wp-content/uploads/2022/05/hukidashi1_normal.png)
非同期処理をするにはPromiseオブジェクトを使うのが簡単です。Promiseオブジェクトを使った非同期処理の実装方法について紹介しましょう。
非同期処理をするための「Promiseオブジェクト」
非同期処理をするためには、Promiseオブジェクトを使用することができます。Promiseオブジェクトは非同期処理を行うために必要なメソッドやプロパティを持っています。
Promiseオブジェクトを使用するためには、new演算子を使用してインスタンスを生成します。その後、thenメソッドやcatchメソッドを使用して処理を実装します。
new Promise((resolve, reject) => { 処理本体 })
…resolve:処理が成功したときの通知する関数
…reject:処理が失敗した時の通知する関数
以下はPromiseオブジェクトを使用した非同期処理のサンプルです。
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
delay(3000)
.then(() => console.log('3秒経過しました!'))
.catch((error) => console.log(error));
上記のサンプルでは、3秒後に「3秒経過しました!」と表示する処理をPromiseオブジェクトを使用して実装しています。
then-catch-finallyメソッドについて
then
/ catch
/ finally
三つのメソッドはPromiseオブジェクトにおいて非同期処理の結果に対して処理を定義するために使用します。
メソッド | 説明 | サンプル |
---|---|---|
then | 非同期処理が成功した際に実行される処理を定義します。 | delay(3000).then(() => console.log(‘3秒経過しました!’)) |
catch | 非同期処理が失敗した際に実行される処理を定義します。 | delay(3000).catch((error) => console.log(error)) |
finally | 非同期処理が成功したか失敗したかに関わらず、最後に実行される処理を定義します。 | delay(3000).finally(() => console.log(‘非同期処理を終了しました’)) |
- thenメソッドは非同期処理が成功した場合に実行されます。thenメソッドには、非同期処理が成功した際に実行される関数を引数として渡します。
- catchメソッドは非同期処理が失敗した場合に実行されます。catchメソッドには、非同期処理が失敗した際に実行される関数を引数として渡します。
- finallyメソッドは非同期処理が成功したか失敗したかに関わらず、最後に実行される処理を定義します。finallyメソッドには、非同期処理が終了した際に実行される関数を引数として渡します。
上記の三つのメソッドを組み合わせて使用することで、非同期処理の結果に応じて適切な処理を実行することができます。
const delay = (ms) => new Promise((resolve, reject) => setTimeout(setTimeout(() => {
if (ms > 2000) {
resolve();
} else {
reject(new Error('Delay time is too short'));
}
}, ms));
delay(3000)
.then(() => console.log('3秒経過しました!'))
.catch((error) => console.log(error))
.finally(() => console.log('非同期処理を終了しました'));
上記のサンプルでは、3000ms後にresolve()が呼ばれるようにsetTimeoutを使用しています。
3000ms以上ならばthenメソッド、そうでない場合はcatchメソッドが呼ばれます、最後にfinallyメソッドが呼ばれます。
まとめ
「Promiseを使った非同期処理の実装方法」を以下にまとめます。
- JavaScriptで非同期処理をするためにはPromiseオブジェクトを使用する。
- Promiseオブジェクトを生成するにはnew演算子を使用する。
- then / catch / finallyメソッドを使用して、非同期処理の結果に応じた処理を定義する。
![](https://tech.mychma.com/wp-content/uploads/2022/05/hukidashi2_normal.png)
![](https://tech.mychma.com/wp-content/uploads/2022/05/hukidashi2_normal.png)
![](https://tech.mychma.com/wp-content/uploads/2022/05/hukidashi2_normal.png)
Promiseオブジェクトとthen / catch / finallyメソッドを使用することで、簡単に非同期処理を実装することができるようになりました。
![](https://tech.mychma.com/wp-content/uploads/2022/05/hukidashi4_normal.png)
![](https://tech.mychma.com/wp-content/uploads/2022/05/hukidashi4_normal.png)
![](https://tech.mychma.com/wp-content/uploads/2022/05/hukidashi4_normal.png)
Promiseオブジェクトを使用する際には、then / catch / finallyメソッドを組み合わせて使用することで、非同期処理の結果に応じて適切な処理を実行することができます。
また、catchメソッドを使用して、非同期処理が失敗した際の処理を定義することで、アプリケーションのクラッシュを防ぐことができます。
コメント