0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

【JavaScript】Promiseと非同期処理について

Posted at

こんばんは。今回はJavaScriptの非同期処理について書いていきます。

##非同期処理とは?
非同期処理とは、ある処理を実行をしている際に、他のタスクが別の処理を実行できる方式をいいます。
DBから値をとってくるなど、他の処理と比べて時間がかかる処理があった場合、この非同期処理の仕組みがないと、DBから値をとってくる処理が終わるまで待っていなければなりません。
非同期処理の場合、DBから値をとってくる処理を行ってるとき、別のイベントが発生すると、一旦DB処理を中断してそのイベントを処理します。そしてまたDB処理を再開します。

しかし非同期処理にも不便な点があります。例えばDBから値を取得し、そのデータをreturnする関数があったとします。普通にこの関数を実行すると、DBから値を取得する処理が行われている間にreturnが実行され、正常に値が返されなくなってしまいます。
そのような問題を解決するための方法はいくつかありますが、今回はPromiseを使った方法をご紹介します。

##非同期処理を順番に実行する
非同期処理を順番に実行する場合、Promiseを使うと便利です。
特に順番に行いたい処理がたくさんある場合便利です。次のように書きます。 
スクリーンショット 2022-02-20 174449.png

関数の中にPromiseをreturnするプログラムを書きます。この関数自体はPromiseオブジェクトを返します。Promiseオブジェクトには以下の3つの状態があります。
・pending:処理が実行中である
・fulfilled:処理が正常に終了した
・rejected:処理の実行に失敗した

処理が成功した場合、resolveメソッドが呼ばれ、次の処理(asyncfunc("wwwww"))に移ります。この時、呼び出す次の関数の直前にreturnをつけます。引数resには直前に呼び出した関数の戻り値が入ります。
処理が失敗した場合、rejectメソッドが呼ばれ、.catch()部分に処理が移ります。
このようにPromiseを用いて直列的に処理を実行することができます。

##Promiseのその他の機能
Promiseの発展的な機能をいくつかご紹介します。

・Promise.allメソッド
引数で渡された関数がすべて成功した場合に次のthen()に移ります。一つでも失敗すると失敗コールバックが呼び出されます。引数resには実行結果の配列が入っています。
スクリーンショット 2022-02-20 180857.png
・Promise.allSettledメソッド
Promise.allとは違い、いずれかの処理が失敗(reject)しても、then()に移ります。

・Promise.raceメソッド
引数で渡された関数のどれか一つが終了した時点で次のthen()に移ります。処理が終了する時間により結果が異なる可能性があります。         

以上です。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?