async / await
Javascriptはほとんど非同期方式なので,コールバック関数の概念は非常に重要です。ところでコールバック関数が深まれば、コードが複雑になることになるのでES6でPromiseを導入しました。asyncとawaitを使用することで,非同期コードを同期的にきれいに処理できるようになりました。しかしasyncとawaitがコールバック地獄のすべての問題を解決することはできません。
コールバックの深さが浅いときは,作成しやすいコールバック関数を呼び出すか,またはPromiseを使った方がよりよい方法かもしれません。
また,async/awaitはPromiseを使うのでPromiseを知らなければならないし,async/awaitができない動作をPromiseで解決できるため,async/awaitがいつも答えではありません。これからPromiseを基盤として非同期コードをきれいに作成できるように助けるasync/awaitについて調べるようにします。
例)コールバック関数を使用するには,asyncとawaitキーワードを使用します。
async function foo(){
await someAsyncFunction(){...}
await anotherAsyncFunction(){...}
}
関数名の前にasync キーワードをそして呼び出す非同期関数前にawait キーワードを使用します。関数前にasyncが定義されていなければ,awaitが適用されるということが出来ないです。
上のコードはsomeAsyncFunction , anotherAsyncFunction の関数が非同期コードであってもasync / await が適用されると、常にsomeAsyncFunction -> anotherAsyncFunctionの順に関数が実行されます。このように非動鍵コードを同期的に行わせるのがasync / awaitです。この時,someAsyncFunctionとanotherAsyncFunction関数はPromiseをリターンする必要があります。async/awaitがPromise方式を使うからです。
重要なPOINT
awaitはaysnc関数の中に含まれなければなりません。
正しくない文法の例)
async function test(){
function goo(){
await foo(1, 2000)
}
await foo(2, 500)
await foo(3, 1000)
}
function foo(num, sec){
return new Promise(function(resolve, reject){
setTimeout( function(){
console.log(num);
resolve("async는 Promise방식을 사용합니다.");
}, sec);
});
}
test();
上記のコードを実行すると,"awaitはasync 関数でのみ有効である。 "はエラーが発生します。
awaitで呼び出せば解決!
async function test(){
async function goo(){
await foo(1, 2000)
}
await goo()
await foo(2, 500)
await foo(3, 1000)
}
asyncのいろんな表現
asyncの基本表現は次の通りでした。
async function test(){
await foo(1, 1000)
}
即座に実行関数としても表現でき,次のようになります。
(async function test(){
await foo(1, 1000)
})()
アロワ関数でも表現できます。
let test = async () => {
await foo(1, 1000)
}
async 関数は上記のように即時実行関数,arrow 関数で表現がすべて可能です。