[javascript]async / awaitを使ってみました。

こんばんは。
前回に引き続き、async / awaitを使ってみました。（こっちが何かを知りたくて遠回り）
コードはnodeを使ってコンソールで実行してみています。

前回：

https://codelikes.com/javascript_promise/

async
await
axiosでテスト
1. テストコード
参考

async

関数の頭につけることで、非同期関数を定義できます。
これをつけると、定義した関数を呼んで、returnするとPromiseでresolveするのと同様の意味になるようです。

async function test_sync() {
  return "hello";
}

test_sync().then(function(message){
  console.log(message);
}).catch(function() {
  console.log("error");
});

// 結果：
// hello

エラーが関数内で発生(throw)すると、rejectと同様の意味になって、catchに来ます。

async function test_sync() {
  throw new Error("bbb");
  return "hello";
}

test_sync().then(function(message){
  console.log(message);
}).catch(function() {
  console.log("error");
});

// 結果：
// error

await

awaitを指定して呼び出した関数はPromiseを返すまで、処理を一時停止します。
awaitはasyncされている関数内でしか使えません。

function calcValue(val) {
  return new Promise(function(resolve) {
    setTimeout(function() {
      resolve(val * 2);
    }, 2000);
  });
}

async function test_sync2() {
  let result1 = await calcValue(10);
  let result2 = await calcValue(5);

  return result1 + result2;
}

test_sync2().then(function(message){
  console.log(message);
}).catch(function() {
  console.log("error");
});

// 結果：
// 30

一時停止できてることが確認できました。
上記のコードはcalcValueを実行して、それぞれ2をかけたものを2秒後に返して、30になってます。

axiosでテスト

自分が今回疑問に思ったコードをみてみるとaxiosにawaitが使われていました。
axiosの返り値はresolveなので、awaitをつけることで、通信が終わるまで待ってくれるようですね。

テストコード

実際に待ってくれるのか下記のコードをnodeで実行してみました。

let axios = require('axios');

async function test_await() {
  await axios.get("https://codelikes.com/wp-json/wp/v2/posts").then(function(res){
    for (let i = 0;i < res.data.length; i++) {
      console.log((i + 1) + " : " + res.data[i].title.rendered);
    }
  });

  console.log("test");
}

test_await();

このコードはwordpressのapiにアクセスしてブログの情報を取ってきてくれます。
res.data[n].title.renderedにタイトル文字列が入っているので、それを一覧化しています。

実行すると、testの文字列が最後に出力されていることが確認できました。
awaitをつけない場合は、最初にtestが出力されて、ブログタイトル一覧が表示されます。