はじめての同期処理、非同期処理 〜async/await〜

前提

• promiseの使い方をふわっと覚えた!
• promise.thenを使った逐次処理を覚えた!

前回の記事：はじめての同期処理、非同期処理 〜Promise〜

前回の復習

非同期な処理を上手く逐次実行させたいときは、promise型で値を返してthenする

• promiseで返したい値をラップする

myFunc

function myFunc(){
    return new Promise((resolve, reject) => {
    // 処理内容
    resolve(返したい値);
    });
}

• thenで次に実行したい内容を記載する。

myFunc

myFunc().then(処理);

• thenはつなげられるが、thenに登録されている関数自体は非同期処理なのでどんどん逐次実行させたい場合はthen内部もpromise化が必要

async/awaitについて

• これを使うとthenを使わなくても処理を待つことができる

使い方

promiseを返す次の関数がある

myFunc

function myFunc(){
    return new Promise((resolve,reject) => {
        setTimeout(() => {
            resolve('hello my async!');
        }, 3000);
    });
}

main()

async function main(){
    // promiseを返すmyFuncの前にawaitと記載することで処理を待つことができる
    var buf = await myFunc();
    console.log(buf);
}

ちなみに上記は次のような書き方もできる。

main()

async function main(){
    console.log(await myFunc());
}

• なお、awaitはasync functionの中でしか使用できないので注意
• asyncをつけた関数は勝手にpromiseを返してくる

asyncを使った.then.then的なやつ

myAsync()

async function myFunc1(){
    return 'test1';
}

async function myFunc2(){
    var data = await myFunc1();
    return (data + ' test2');
}

function myFunc3(){
    setTimeout(async () => {
        var data2 = await myFunc2();
        console.log(data2 + ' test3');
    }, 3000);
}

myFunc3();

• asyncのmyFunc1がpromise型の'test1'を返す
• asyncのmyFunc2でmyFunc1から'test1'を受け取り' test2'を付け足す
• myFunc3で時間のかかる処理としてsetTimeoutを使って'test1 test2'に' test3'を付け足す

test1 test2 test3

一応注意点というか、引っかかったのはsetTimeoutのコールバックにasyncをつけていなくて、myFunc2までは順調にawaitしてくれていたのに最後にmyFunc3のdata2が先に値を入れようとしてundifinedとなってしまったり。

• コールバックにも、ちゃんとつけよう、async

APPENDIX

• async/awaitを使ったモダンな非同期処理

関数の表記方法について

はじめて=>このなぞの矢印を見たときはなにこれと思ったので一応書いておく。
=>というのはアロー関数というらしい。

function 関数名(arg){}

これと、

function (arg){}

これと、

(arg) => {}

これはほとんど同義らしい。
詳しいことはアロー関数とか無名関数とか匿名関数とかでぐぐるとよいと思われる。

以上。