※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')
})()
//結果
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')
})()
[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)