Node.jsのasync/awaitとPromiseを超ざっくり_中編 #JavaScript

※Node.jsのasync/awaitとPromiseを超ざっくり_前編の続きです。後でまとめるかも。
※arrow関数は使わないといったな、あれは嘘だ。

2.3.asycn/await

asycn/awaitとはPromiseのシンタックスシュガー。
（同じような内容のことをもっと簡単な書き方でできるよ、というもの。）

async

Promiseの場合は

function hoge() {
    return new Promise((resolve, reject)=>{
        //処理
        resolve('success')
        //or
        reject('error')
    })
}

というように明示的にPromiseをリターンしていたが、asyncを使って書くと以下のように書ける。


async function() hoge{
    //処理
    return 'success'
    //or
    throw new Error('error')
}

asyncで宣言した関数内は
・Promiseを返す。
・値をreturnするとPromiseをresolveする
・エラーをthrowするとPromiseをrejectする

await

・async functionの中でしか使えない
・Promiseが resolve or rejectされるまでasync functionの処理を待つ
使用例）


//プロミスを返す非同期function
function addNum_promise(num1, num2) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(num1 + num2);
        }, 1000);
    })
}

async function example(num1, num2) {
    //[2]
    const res = await addNum_promise(num1, num2) //Promsieがresolveされるまで待つ
    return res + 10
}

(async()=>{
    console.log('start')
　　//[1]
    console.log(await example(1,2))
    console.log('end')
})()

console

//結果
start
13
end

Promiseを返すfunctionにawaitをつけて呼び出すことで処理の順番が同期的になっていることがわかります。
ちなみに[1]、[2]のawaitを外してみた場合はそれぞれこのようになります

//*******************[1]
async function example(num1, num2) {
    const res = await addNum_promise(num1, num2) //Promsieがresolveされるまで待つ
    return res + 10
}

(async()=>{
    console.log('start')
　　//[1]await外す
    //console.log(await example(1,2))
    console.log( example(1,2))
    console.log('end')
})()

//*******************[2]
async function example(num1, num2) {
    //[2]await外す
    //const res = await addNum_promise(num1, num2) //Promsieがresolveされるまで待つ
    const res =  addNum_promise(num1, num2) 
    return res + 10
}

(async()=>{
    console.log('start')
　　console.log(await example(1,2))
    console.log('end')
})()

console

[1]のawaitを外した場合
start
Promise { pending }
end

[2]のawaitを外した場合
start
[object Promise]10
end

[1]の場合はfunction「example」が返すPromiseがまだ準備中だよ(未resolve)～って意味
[2]の場合はfunction「addNum_promise」のPromise(res)がresolveされていない状態でres+10をreturn(==resolve)しているので上のような結果になる。[object Promise]の中身はPromise { pending }である。

上の2つをまとめると
[1]function「example」が未解決という結果が返された
[2]function「example」が解決済(function「addNum_promise」が未解決+10)という結果が返された

書いててよくわからなくなったので続きはまた後日...(薄く延ばす戦法)

4.参考

Node.js 非同期処理・超入門 -- Promiseとasync/await
Node.jsデザインパターン
async/await 入門（JavaScript）

Node.jsのasync/awaitとPromiseを超ざっくり_中編

目次

2.3.asycn/await

async

await

4.参考