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 関数で表現がすべて可能です。