【JavaScript】asyncはPromiseを返す関数、awaitはPromiseを返されるの待つ演算子

JavaScriptのasync awaitについて勉強したので、

挙動を実際のコードを示しながらまとめます。

async / awaitとは

ECMAScript2017で策定された非同期関数を同期的に簡潔に書ける文法仕様です。

async

asyncはPromiseを返す関数です。

コードを動かしながら、挙動を確認します。

例1 「1」をreturnするtestfunc関数

test.js

'use strict';
const testfunc = async () => {
console.log("test");
return 1;
}
console.log(testfunc());

結果

#node test.js
test
Promise { 1 }

testfunc関数では「1」をreturnしていますが、

結果をPromiseオブジェクトでラッピングして返していますね。

例2 returnを明示的に記載しないtestfunc関数

test2.js

'use strict';
const testfunc = async () => {
console.log("test");
}
console.log(testfunc());


結果
$ node test2.js
test
Promise { undefined }

関数がasyncであれば明示的にreturnしなくてもPromiseを返してくれます。

await

Promiseが返されるのを待つ演算子です。

Promiseで解決(resolve)された値を格納します。

async関数内でのみ使用可能です。

例3 awaitを使用して”test”文字列を格納する

test3.js

'use strict';
function awaitfunc(){
return new Promise((resolve,reject) => {
resolve("test");
});
}
const testfunc = async () => {
const test2 = await awaitfunc();
console.log(test2);
}

testfunc()

結果
$ node test3.js
test

awaitfunc関数でresolveされた値(test)がtest2に格納されます。

例4 awaitを使用しない場合の挙動

test4.js

'use strict';
function awaitfunc(){
return new Promise((resolve,reject) => {
resolve("test");
});
}
const testfunc = async () => {
const test2 = awaitfunc();
console.log(test2);
}

testfunc()


結果
$ node test4.js
Promise { 'test’ }

awaitしなかった場合はそのままPromiseオブジェクトが入ります。

例5 awaitの後ろがPromise以外の場合

test5.js

'use strict';

const testfunc = async () => {
const test2 = await "hoge";
console.log(test2);
}

testfunc()

結果
node test5.js
hoge

awaitの後ろがPromiseでない場合はその値をそのまま返します。

async awaitはセットで覚えることになりますが、それぞれの挙動を理解しておくと良さそうですね。