非同期処理メモ⑫(AwaitとAsync)

おはようございます。

最近寿司打のスコアが悪くなってきていてすこし危機感を感じておりますどうもハヤトワンです。

タイピング量は増えているはずなのに、、、それはあまり意味ないのかそれとも僕の普段からの速さの意識が足りていないのか。

とりあえず、炭治郎が全集中常駐のトレーニングをしているかのごとく僕もタイピングスピードを速くする全集中常駐しようと思います(厨二病)

さて、今日は非同期処理のAwaitとAsyncについてのメモφ(..)

Await/Asyncとは

Promiseを更に直感的に記述できるようにしたもの

Async

Promiseを返却する関数の宣言を行う。

Await

Promiseを返却する関数の非同期処理が完了するまで待つ。

書いてみる

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


async function init() {
  await sleep(0);
}

init();

コンソール

0

まずはこんな感じで表示される

次にこう

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


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

init();

コンソール

0
1

こうしてawaitを使うと、resolveで渡された引数(val)が変数に代入されるようになる。

さらに。。。

function sleep(val) {
  return new Promise(function(resolve) {
    setTimeout(function() {
      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);
  console.log(val)
}

init();

コンソール

0
1
2
3
4
5

となる。

これがasync/awaitの基本的な使い方。

必ずasyncとawaitはセットで使うこと。

ニコイチです。

ということで、今日はここまで。

それでは今日も良い１日を〜！