こんばんは。
前回に引き続き、async / awaitを使ってみました。（こっちが何かを知りたくて遠回り）
コードはnodeを使ってコンソールで実行してみています。
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が出力されて、ブログタイトル一覧が表示されます。
参考
Qiitaの記事がわかりやすかったです。参考にさせて頂きました。
コメント