Promiseで使う【async/await】の学習

asyncとawaitの学習

ポイント

• asyncはpromiseを（正常動作と異常動作の準備）を簡単に記述する。
• awaitはpromiseで使われる正常動作と異常動作の記述に.thenを使わなければいけないところ、awaitで一文で簡潔に書ける。

fetch('http://example.com/movies.json')
  .then(response => response.text())
  .then(data => console.log(data));

fetchはpromiseで実装されていてresponseオブジェクトを含むため.thenからresponseをアロー関数で受け取ることができる。

awaitを使う場合は

fetch('http://example.com/movies.json')
  await response.text();
  await console.log(data);

こうしたい気もするけど fetchからのpromiseオブジェクトが.thenで繋がらずにawaitで省略しているため、responseが何も入っていない状態のためjsonで呼び出せない。 省略したい場合は

let response =fetch('http://example.com/movies.json')
  let data = await response.text();
  await console.log(data);

しっかり変数に入れてその変数から取り出す処理を書く。

しかし、fetchを変数に入れるとawaitは基本的にasync関数の中で機能するため

async function show(){
let response = fetch('http://example.com/movies.json')
  let data = await response.text();
  await console.log(data);
}

show();

asyncでラップする（囲う）。 でもでもこれだと、async関数の中でfetchが機能しないので、

async function show(){
      let response = await fetch('http://example.com/movies.json')
      let data = await response.text();
      await console.log(data);
}

show();

このようにawaitでfetchを起動させなければいけない。

と、こんな感じでfetchはpromiseオブジェクトを含むのでawaitを使って綺麗に書こうと思ったら、asyncを使わないといけないし、asyncを使ったらfecth自体もawaitで書かなければいけないしで色々重ねて書く必要がある。

見た目は綺麗。

async/awaitはruby使ってる時の作業に若干近いと感じた。