lifehack blog

役に立つガジェットや知識を配信します

async の基本プロセスついて図にまとめてみた。

f:id:walk0204:20210904210009p:plain

記事目安...5分

はじめに

以前 Promise の基本プロセスについてまとめたので、async の基本プロセスについてもまとめてみます。

async とは?

async で押さえておくべき機能はおおきく2つ。

①async は関数を非同期関数化します。

②async 付きで定義された関数は、Promise を返すようになります。

■ sample.js

hoge = async () => {
    return "fuga";
}

console.log(hoge())
$ node sample.js
Promise { 'fuga' }

遷移図

さきほどの Promise を返すという点に注目すると、async の基本プロセスの遷移図は以下のイメージ。 以前書いた Promise の基本プロセスと比較するとわかりやすいと思います。

参考: https://walk0204.hatenablog.com/entry/tech/programing/nodejs/promise-process

f:id:walk0204:20210904205342p:plain

黒色の四角は、実行される関数を、
水色の四角は、Promise のステータスを表します。async のステータスではないので注意。

Promise のステータス

  • appending: Promise の初期の状態、もしくは実行中の状態
  • fulfilled: return メソッドが呼び出されて、処理が正常に完了した状態。
  • rejected: throw メソッドが呼び出されて、処理が失敗した状態

プロセス分岐の解説

Promise が返ってくるので、プロセスの分岐も前回と同じく3パターン。

f:id:walk0204:20210904205421p:plain

基本的に、

  • resolve() → return
  • reject() → throw()

に変わっただけなので解説は割愛します。

よくわからない人は、以下を読んでいただけると orz

参考: https://walk0204.hatenablog.com/entry/tech/programing/nodejs/promise-process

まとめ

async と Promise を図示してみると、async と Promise の違いはほとんどないなということが分かりました。

ただ、async を使うとコードがすっきりする(らしい?)&await も使えるので積極的にこっちを使うといいのではと思います。