非同期処理を簡単に書けるasync/awaitとは?【JavaScript】

async/awaitはとっても簡単に非同期処理が書ける構文です、今時JavaScriptを書くなら必須と言っても過言では無いと思います。

非同期処理といえばPromiseだと思いますが、Promiseとジェネレータを組み合わせて非同期処理をもっと手軽に実装できるようにしたものがawync/awaitです。

Promiseでコールバック地獄からは抜け出しましたが、それでもまだ複雑さが残っていました。async/awaitを使うことでようやく楽に非同期処理が書けるようになります。

ちなみにasyncの正しい読みは「エイシンク」です、ついアシンクって言っちゃいます笑

 

基本構文

asyncを関数につけることで、そのasync関数はPromiseを返すようになります。

また、async関数内にはawait式を含むことができ、awaitをつけた式がPromiseを解決するまでasync関数の処理を一時停止します。

つまり、Promiseを同期的に実行できるようにしています。

function helloAsync() {
  return new Promise(resolve => {
    setTimeout(() => resolve('hello async'), 1000);
  });
}

async function hello() {
  console.log(await helloAsync());
}

hello(); // hello async

fetchなんかのthenをチェーンしていく処理もasync/awaitで簡潔に書くことができます。

function fetchFunc() {
  return fetch('http://example.com/movies.json')
    .then(function(response) {
      return response.json();
    })
    .then(function(myJson) {
      console.log(myJson);
    });
}

async function fetchFunc() {
  const response = await fetch('http://example.com/movies.json');
  const myJson = await response.json();
  console.log(myJson);
}

fetchFunc();

 

今時非同期処理は必須になってきていると思うので、async/awaitはぜひ覚えましょう!

Reactの基礎知識【初心者向け】