Edited at

ネストするPromise

More than 1 year has passed since last update.

JavaScriptのネストするPromiseで混乱したので、サンプルコード書いて理解しました。その時のコードを貼っておきます。

//

// 引数に1を渡すと成功、それ以外失敗
//
function func1(a) {
return new Promise((resolve, reject) => {
if (a === 1) {
resolve()
} else {
reject()
}
})
}

//
// func1をネストして呼び出す
//
function main() {
func1(1).then(() => {
console.log("ok1")
return func1(1).then(() => {
console.log("ok2")
return func1(1).then(() => {
console.log("ok3")
}).catch(() => {
console.log("ng3")
// catchした場合、rejectを返さないと呼び出し元でcatchではなくthenに流れるので注意
return Promise.reject()
})
})
}).then(() => {
// ok3までいったら、ここに来る
console.log("ok all")
}).catch(() => {
// 途中で失敗したら、ここに来る
console.log("ng")
})
}

この例ではmain()のfunc1()呼び出しはすべて引数1なので、すべて成功して以下のようにコンソールに表示されます。

ok1

ok2
ok3
ok all

3回目のfunc1()の引数を1以外にして失敗させてみます。

-      return func1(1).then(() => {        

+ return func1(2).then(() => {
console.log("ok3")

結果はこうなります。

ok1

ok2
ng3
ng