asyncとawaitについて

jsを触っている時に、なんだっけ？と思ったasyncとawaitについて調べたことをまとめました。

async/awaitとは

Promiseをもっと同期処理っぽくかける構文です。

Promiseとは

「非同期処理の結果を表すオブジェクト」です。
Promiseは3つの状態を持ちます。

• pending:(初期状態)
• fulfilled:成功
• rejected:失敗
  プロミスは何か値を返すととともに状態も返すイメージですね。
  この状態は途中で変化します。通常非同期処理は時間のかかる処理を非同期として通信するわけですが、即時リターンをしてくれないので、プロミスは最初にpendingを返すわけです。待機中って言ってもいいかもしれません。その後に成功か失敗かに状態が変化します。

じゃあasync/awaitって実際なんなの？

Promiseが理解できたところで、async/awaitについてさらにまとめます。
関数の前にasyncをつけるとその関数は自動的にPromiseを返します。

async function getData() {
  return 'データ取得完了';
}

つまりこの関数は'データ取得完了'を返すとともに状態も返すようになるわけですね。
次にawaitですが、awaitはasyncのついた関数の中で使えます。このawaitをつけることで、Promiseが解決(fulfilledまたはrejected)を返すまで待ちます。

async function fetchData() {
　　const response = await fetch("https://api.example.com/data");
  const data = await response.json();
    console.log(data);
}

非同期処理は同期処理と違って処理の順番が飛ばされてしまいますから、ほしいと思った値が変数に入らずにその変数を画面に出力してしまって、画面に何も表示されないなんてことが起きてしまいます。このawaitを使うことでasyncの中では最後に実行されるわけですね。