Promiseとかresolveとかthenとか

同期処理とは？

上から順番に処理が実行される、いわゆる通常の処理。
前の処理が終わったら、次の処理が実行される。
前の処理が実行されないと次の処理が実行されない。

非同期処理とは？

上記の逆

処理の完了を待ってから次の処理へ進みたい。どうすればいい？

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

// NGパターン
console.log('1')

setTimeout(() => { // ただのsetTimeout関数が呼ばれているだけで、処理の完了を待って！って記述はない
    console.log('2')
}, 2000)

console.log('3')

// NGパターン
console.log('1')

new Promise(() => { // 非同期っぽく書いてるけどresolveを書いてないから処理が完了したタイミングが明示できない
    setTimeout(() => {
        console.log('2')
    }, 2000)  
}) // thenで繋げないと処理が完了した後に実行したい指示が明示できない

console.log('3')

// NGパターン
console.log('1')

new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('2')
        resolve()
    }, 2000)  
}) // resolveを書いてるけど、完了後に'3'を表示したいならthenで繋いで処理を記述しないと意図通りの動作はしない

console.log('3')

// OKパターン
console.log('1')

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

処理の結果次第で出力する内容を変えたい。どうすればいい？

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

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

new Promise((resolve, reject) => {
    setTimeout(() => {
        if (result) {
            resolve('2')　// resultがtrueだったらthenに繋いで、thenの引数には'2'が渡る
        } else {
            reject('10000')　// resultがfalseだったらcatchに繋いで、catchの引数には'10000'が渡る
        }
    }, 2000)  
}).then(val => {
    console.log(val)
}).catch(e => {
    console.log(e)
}).finally(() => {
    console.log('3')
})