LoginSignup
0

More than 3 years have passed since last update.

async,awaitの使い方

Last updated at Posted at 2020-01-28

参考サイト

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を付ける。

以上。

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