async,awaitの使い方

参考サイト

Promiseを使った例

const p1 = new Promise(resolve =>
  setTimeout(resolve, 10000) // 10秒経ったら
);
const p2 = new Promise(resolve =>
  document.body.addEventListener('click', resolve) // document.bodyがクリックされたら
);
const p3 = new Promise(resolve =>
  window.addEventListener('load', resolve) // windowのloadが完了したら
);

Promise.all([p1, p2, p3]).then(() =>
  console.log('10秒経っていてかつ、document.bodyがクリックされていてかつ、windowのloadが完了した状態')
);

Promiseは同期的な記述をする事が出来るため、コールバックのネストを無くす事には成功した。
ただ、Promise.allは処理の順番をコントロールする事が出来ないので、aが終わったらbとする記述は書けない。

async,awaitを使った例

function a() {}
function b() { return new Promise(resolve => setTimeout(resolve, 1000)) }
function c() {}

const fn = async () => {
  a();
  await b();
  c();
} ;

fn();

この処理はc()を行う前にb()が必要という事を記述出来る。
setTimeoutという関数の返り値がpromiseオブジェクトではないため、promiseで包んであげる必要がある。
axiosなどを使う場合は返り値が元々promiseオブジェクトなのでpromiseで包む必要がない。

• 行う事としては、apiを利用する関数にはpromiseで包んで返り値をpromiseオブジェクトにする。
• その関数を使う関数に対してasyncを付ける。
• apiを利用する関数にawaitを付ける。

以上。