async/awaitについて理解する

async/awaitはPromiseをより直感的に記述できるようにしたもの（ES8）
asyncと書けば必ずPromiseが返ってくることが担保されている。
awaitはPromiseを返却する関数の非同期処理が完了するまで待って次の処理に移行するようにする。

Promiseの処理をasync/awaitに書き換える

Promiseの処理

function sleep(val) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(val++);
      resolve(val);
    }, 1000);
  });
}

sleep(0)
  .then((val) => {
    return sleep(val);
  })
  .then((val) => {
    return sleep(val);
  })
  .then((val) => {
    return sleep(val);
  })
  .then((val) => {
    return sleep(val);
  })
  .then((val) => {
    return sleep(val);
  });

console.log("global end");

// Promise
// global end
// 0
// 1
// 2
// 3
// 4
// 5

上記のPromise処理をasync/awaitに置き換える

function sleep(val) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(val++);
      resolve(val);
    }, 1000);
  });
}

async function init() {
  let val = await sleep(0);
  val = await sleep(val);
  val = await sleep(val);
  val = await sleep(val);
  val = await sleep(val);
  val = await sleep(val);
}

init();

console.log("global end");

// 結果は同上

awaitを使用すると、返り値としてresolveが返ってくる。 awaitを付けないと、Promiseオブジェクトが返ってくる（returnされているので）

async自体もPromsieのインスタンスを返す。（console.log(init())で確認できる）
なので、init()にも.thenを繋げることができ、asyncの処理が終了したら.thenの中が実行する。 また、async内でreturn valをすると、.then(val)に値を引き渡すことができる。

// 省略

async function init() {
  let val = await sleep(0);
  val = await sleep(val);
  val = await sleep(val);
  val = await sleep(val);
  val = await sleep(val);
  val = await sleep(val);
  return val
}

init().then((val) => {
  console.log("hello");
});

参考

www.udemy.com