Promiseとかasync,awaitとかtry,catch

Promise/then か async/await　か

• 非同期処理で、処理を待ってから次のコードを実行したいのは同じ
• 処理が完了を待ってから then を使って次の処理へ進むように記述するか、処理を完了を待っててほしい部分に await を使って記述するかの違い

ブラウザで試してみて

やりたいこと 1 ->（2秒後に）2 -> 3 の順番で表示させたい

• Promise/then を使ったパターン

console.log('1')

new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('2')
        resolve()
    }, 2000)  
}).then(() => {
    console.log('3')
})

• async/await を使ったパターン

console.log('1')

const show = async() => {
    await new Promise((resolve, reject) => {
        setTimeout(() => {
            console.log('2')
            resolve()
        }, 2000)  
    })
    console.log('3')
}
show()

try/catch って何をやってるの？

• 例外処理を記述したい時に使う
• tryブロックで何かしらのエラーが起きた時、rejectが呼ばれた時にcatchブロックに進む

async/await を使う時に、try/catch を使う

やりたいこと 1 ->（2秒後に） resultの結果がtrueだったら 2, resultの結果がfalseだったら 10000, -> 3 の順番で表示させたい

const result = true
console.log('1')

const show = async() => {
    try { // ｔｒｙブロック内で例外が発生したら(rejectが呼ばれたら)catchブロックへ進む
        const res = await new Promise((resolve, reject) => {
            setTimeout(() => {
                if (result) {
                    resolve('2') // 処理の返り値が'2'になる -> resに'2'が代入される
                } else {
                    reject('10000')
                }
            }, 2000)  
        })
        console.log(res) // resolveの返り値が'2'でresに'2'が代入されるためtryブロックが正常に動作したらlogに'2'が表示される
    } catch(e) {
        console.log(e) // rejectが呼ばれた場合は引数に値が渡ってくる
    } finally {
        console.log('3')
    }
}
show()

const result = true
console.log('1')

new Promise((resolve, reject) => {
    setTimeout(() => {
        if (result) {
            resolve('2')
        } else {
            reject('10000')
        }
    }, 2000)  
}).then(val => {
    console.log(val)
}).catch(e => {
    console.log(e)
}).finally(() => {
    console.log('3')
})