Javascript非同期処理のシンプルな書き方(ES2017)

#Javascriptは非同期処理を順番に実行してくれない

function func1() {
	setTimeout( function() {
		console.log("hello1");
	}, 3000)
}

function func2() {
	setTimeout( function(){
		console.log("hello2");
	}, 3000)
}

function func3() {
	console.log("hello3"); 
}

func1();  //次こいつ
func2();  //最後にこいつ
func3();  //最初にこいつ

/*
hello3
hello1
hello2
*/

補足１：わかりやすさのため、あえてアロー関数は使ってません
補足２：非同期処理を同期的に順次制御するための書き方の記事になります

###非同期処理とはファイルの読み込みやAjax通信、setTimeoutなどの待ち時間が発生する処理です。

####これらの処理があった場合、Javascriptはその実行の途中で次の処理を開始してしまいます(><)

####しかし、ES2017からはasync/awaitを使うことでとっても書きやすくなりました(^^)

#非同期処理の書き方(ES2017)

function func1() {
        //Promiseを返す
        return new Promise( function(resolve /*成功時*/ , reject /*失敗時*/) {
                //非同期処理はPromiseの中に書く
                setTimeout( function () {
　　　　　　　　　　　　　console.log("hello1")
                        //resolveを実行する。
                        resolve();
                }, 3000)
        })
}

function func2() {
        //Promiseを返す
        return new Promise( function (resolve /*成功時*/ , reject /*失敗時*/) {
                //非同期処理はPromiseの中に書く
                setTimeout( function () {
　　　　　　　　　  　　　console.log("hello2")
                        //resolveを実行する。
                        resolve();
                }, 3000)
        }) ;
}

//async関数の中で!!!
async function func3() {
        //awaitで実行する!!!
        await func1();
        await func2();
        console.log("hello3");
}

func3();

/*
順番に実行される
hello1
hello2
hello3
*/

要するに非同期処理は

• 実行はasync関数の中でawaitを使って呼び出す！！！
• 非同期処理はPromiseの中で実行する！！！
• Promiseのresolve（成功時のハンドラ）、reject（失敗時のハンドラ）を使って非同期処理の結果を返す！！！

以上です。それでは良いJavascriptLifeを(^^)