5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

SC(非公式)Advent Calendar 2019

Day 7

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

Last updated at Posted at 2019-12-07

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

目次

1. Node.jsの非同期処理について
2. 非同期処理の書き方
2.1 コールバック(callback)関数
2.2 Promise
2.3 asycn/await ←この記事はココから!
3. Promiseとasycn/awaitが一緒だと思ったらハマった件
4. 参考

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)

5
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?