【JavaScript】非同期処理⑦ AwaitとAsync

#はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

前回の記事

#目的

• 非同期処理についての理解を深める

#本題
###1.AwaitとAsync

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

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

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

####例1

前提

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

sleep(0).then(function(val) {
  return sleep(val);
}).then(function(val) {
  return sleep(val);
}).then(function(val) {
  return sleep(val);
}).then(function(val) {
  return sleep(val);
}).then(function(val) {
  return sleep(val);
})

上記のPromiseで書かれたコードをAwaitとAsyncで書き換える

//基本的な書き方
function sleep(val) {
  return new Promise(function(resolve) {
    setTimeout(function() {
      console.log(val++);
      resolve(val);
    }, 1000);
  });
}


// 先頭にasyncとつけた関数を用意
async function init(){
  // 中でawaitを使う
  await sleep(0);
}
// initを実行すると0と出力される
init();

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には1が格納されている
  // Promise構文のresolveのvalが渡されている
  console.log(val);
}

init();

####例2

awaitを使ってチェーンを作る

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

async function init(){
  let val = await sleep(0);
  // 上記変数式をコピーし、sleepの引数をvalとする
  val = await sleep(val);
  val = await sleep(val);
  val = await sleep(val);
  val = await sleep(val);
  // 1,2,3...と出力されるようになる
  console.log(val);
}

init();

// 関数ないでawaitを使用している場合が必ずasyncセット（非同期を照明するため）
// asyncは関数コンテキストのみで使える

####例3

thenメソッド、catchメソッドを使用することも可能

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().then(function(){
  // このようにすると上記1から5の出力を待ってからhelloと出力される
  console.log("hello ");
})

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);
  // ここでreturnを宣言すると
  return val
}

// ここの引数でvalが使える
init().then(function(val){
  // そうすると5番目の出力が"hello 5"となる
  console.log("hello " + 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);
  // ここでthrowを宣言すると
  throw new Error();
  return val
}

init().then(function(val){
  console.log("hello " + val);
  // catchに処理が移る
}).catch(function(e){
  // 5の個所でエラー表示がされる
  console.error(e);
})

// 基本的には、Promiseと挙動が同じ

今日はここまで！

#参考にさせて頂いた記事

• 【JS】ガチで学びたい人のためのJavaScriptメカニズム
• Let'sプログラミング JavaScript入門