世界一わかりやすくもないasync/await

はじめに

うーん、いつもでてくる度にこれなんだっけ？

てなるのでまとめました。

async/awaitとは？

ざっくりいうと非同期をいい感じするためのものです。

非同期処理をするためのものといえばcallback関数、それを進化させたのがPromise、、それを進化させたのがasync/await、、

という認識でとりあえず大丈夫です。

(進化ちゅーわけでもないですが。とりあえずね。)

ちなみになんて読むの？

エイスィンク・アウェイトです

あシンクって言いづらいよね。

asyncとは？

非同期関数を定義しているよ！という宣言です！！

そしてこの関数は必ずPromiseを返すこと約束しうす、、、というかそうなります。

「というかそうなる」というのはどういう意味か？

たとえばこうしたらこうなります。


async function doAsyncFunc(){
    //todo ajaxとか非同期用関数の実行を行う普通は。
    return "ストリング"//ふつーに文字列を返しちゃう。
}

const test = doAsyncFunc(); //文字列が返るはず...?

test.then(val=>{//.....プロミスでしたー！！
    console.log(val) //ストリング
})


async function doAsyncFunc(){
    //todo ajaxとか非同期用関数の実行を行う普通は。
    console.log("hoge");
}

awaitとは？

この処理が終わるまではこのあとの処理をまってくりーという特殊な関数実行です。

なお、、この関数実行をするにはにはasync関数の中でないとだめです！

もしそれ以外でawait実行を書いた場合はシンタックスエラーになります。


await doSomething()//これはだめ

//つまりはこういうこと
async doAsyncFunc(){
    await doSomething()
    console.log("hoge");
}

何がいいの？Promiseとは何が違うの？

callback地獄を脱出するためには既にPromiseという手があるじゃん。

どうしてPromiseじゃあだめなの？？

というか最終的にPromiseを返すんでしょ？

いえ！Promiseを返すのではなく、Promiseをいい感じでasync/awaitの実行できるのがいいところです。

実際に見てみましょう！

axiosはPromiseベースのAjaxAPIです。

くわしくはこちら

https://github.com/axios/axios

Promiseの実行

//Promiseでやったらこう。
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });

async/awaitの実行

//async/awaitでやったらこう。スッキリ！！！
async function getUser() {
  try {
      //getのレスポンスを待ってconst responseへの代入をしてくれる。
      //かつ.then.catchをしなくても自動的にtry&catchで分けてくれる。いいね！
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

感想とか

なにがいいかと言われたら、やってることは同じだけれどもPromiseによる非同期実行時の動きをスッキリ書けるよ！ということ。

async宣言の時点でPromiseが返り値として約束されるけど、

TypeScriptの場合は型宣言でも約束されるからなんだか２重でやってる感があるなあ。

まぁそこが肝ってわけでもなから気にしないのがいいんだろうけど。