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


#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/0cf9f47dd8a39b1e5d1f


#目的

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

#本題
###1.AwaitとAsync

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

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

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

####例1

**前提**

```js
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で書き換える

```js
//基本的な書き方
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();
`````
`````js
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を使ってチェーンを作る

````js
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メソッドを使用することも可能

````js
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 ");
})
````
````js
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);
})
`````
`````js
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メカニズム](https://www.udemy.com/course/javascript-essence/)
* [Let'sプログラミング JavaScript入門](https://www.javadrive.jp/javascript/)