Promise

setTimeout(() => {
    console.log(1)
    setTimeout(() => {
        console.log(2)
        setTimeout(() => {
            console.log(3)
        }, 1000)
    }, 1000)
}, 1000)

setTimeoutのような非同期処理を同期的に処理させようとするとコールバック地獄となる。ネストが多重となり可読性が落ちる。

そこでPromise！！

const promise = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve()
        }, 1000)
    }
    )
}
promise().then(() => {
    console.log(1)
    return promise()
}).then(() => {
    console.log(2)
    return promise()
}).then(() => {
    console.log(3)
})

Promiseオブジェクトに非同期処理をまとめる。もしその非同期処理が正常に終了したならreslove関数をコールバックし、エラーが起こるとreject関数をコールバックする。

resolve,rejectは成功失敗を通知する関数。

成功した場合はthenで失敗した場合はcatchで後続処理を書く。

async,await

もっと簡単にかけるのがasync,await

const promise = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve()
        }, 1000)
    }
    )
}
async function asyncFunc() {
    await promise()
    console.log(1)
    await promise()
    console.log(2)
    await promise()
    console.log(3)
}
asyncFunc()

大分スマートに書けるようになった。

asyncを関数につけると、その関数はreturnでPromiseのresolve()を返し、throwでPromiseのreject()を返す。

awaitをつけた関数は、Promiseが返ってくるまで処理を待つ。

Promiseとasync,await

Promise

async,await