PromiseをネストしないでPromiseをチェーンしようとしているがうまくいかない

Question

１つの非同期処理が成功した時に、後続の非同期処理を行いたいのですが、Promiseをネストせずに書こうとすると上手くいきません。

前提として、最初の非同期処理と後続の非同期処理では成功した時も、エラーが発生した時もそれぞれ異なる処理を行います。

また、async awaitを使わないというのも前提となります。

Promiseでネストさせるのは宜しくないようなので、ネストを回避した書き方を身に付けたいのですが、例外が発生する場合に上手くかけません。

正しい書き方をご教示頂けますと幸いです。

両方の非同期処理がresolveされるケース

ネストした書き方

const async1 = () => {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			return resolve('async1 success')
		}, 1000)
	})
}

const async2 = () => {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			return resolve('async2 success')
		}, 1000)
	})
}

async1()
	.then(result => {
		console.log('then1:', result)
		return async2()
			.then(result => console.log('then2:', result))
			.catch(error => console.error('catch2:', error))
	})
	.catch(error => console.error('catch1:', error))

ネストさせない書き方

const async1 = () => {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			return resolve('async1 success')
		}, 1000)
	})
}

const async2 = () => {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			return resolve('async2 success')
		}, 1000)
	})
}

async1()
	.then(result => {
		console.log('then1:', result)
		return async2()
	})
	.catch(error => console.error('catch1:', error))
	.then(result => console.log('then2:', result))
	.catch(error => console.error('catch2:', error))

期待するアウトプット

then1: async1 success
then2: async2 success

実際のアウトプット(OK!)

この場合は、ネストする書き方もネストしない書き方も期待したアウトプットになっている。

then1: async1 success
then2: async2 success

最初の非同期処理がresolveされ、後続の非同期処理がrejectの場合

ネストされた書き方

const async1 = () => {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			return resolve('async1 success')
		}, 1000)
	})
}

const async2 = () => {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			return reject('async2 error')
		}, 1000)
	})
}

async1()
	.then(result => {
		console.log('then1:', result)
		return async2()
			.then(result => console.log('then2:', result))
			.catch(error => console.error('catch2:', error))
	})
	.catch(error => console.error('catch1:', error))

ネストさせない書き方

const async1 = () => {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			return resolve('async1 success')
		}, 1000)
	})
}

const async2 = () => {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			return reject('async2 error')
		}, 1000)
	})
}

async1()
	.then(result => {
		console.log('then1:', result)
		return async2()
	})
	.catch(error => console.error('catch1:', error))
	.then(result => console.log('then2:', result))
	.catch(error => console.error('catch2:', error))

期待するアウトプット

then1: async1 success
catch2: async2 error

※ 最初の非同期処理と異なるエラーハンドリングが後続の非同期処理でできれば、実際は２つ目のcatchブロックでハンドリングすることは必須ではない。

実際のアウトプット(NG!)

この場合は、ネストされた書き方は期待通りにアウトプットを得られるが、ネストさせない書き方は間違っているのか以下のアウトプットになってしまう。

then1: async1 success
catch1: async2 error
then2: undefined

最初の非同期処理でrejectになった場合

ネストする書き方

const async1 = () => {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			return reject('async1 error')
		}, 1000)
	})
}

const async2 = () => {
	return new Promise((resolve, reject) => {
		setTimeout(() => {}, 1000)
	})
}

async1()
	.then(result => {
		console.log('then1:', result)
		return async2()
			.then(result => console.log('then2:', result))
			.catch(error => console.error('catch2:', error))
	})
	.catch(error => console.error('catch1:', error))

ネストさせない書き方

const async1 = () => {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			return reject('async1 error')
		}, 1000)
	})
}

const async2 = () => {
	return new Promise((resolve, reject) => {
		setTimeout(() => {}, 1000)
	})
}

async1()
	.then(result => {
		console.log('then1:', result)
		return async2()
	})
	.catch(error => console.error('catch1:', error))
	.then(result => console.log('then2:', result))
	.catch(error => console.error('catch2:', error))

期待するアウトプット

catch1: async1 error

実際のアウトプット(NG!)

catch1: async1 error
then2: undefined

Answer 1

最初の非同期処理がresolveされ、後続の非同期処理がrejectの場合

async1()
    .then(result => {
        console.log('then1:', result)
        return async2()
    })
    .catch(error => console.error('catch1:', error))
    .then(result => console.log('then2:', result))
    .catch(error => console.error('catch2:', error))

これはasync1とasync2を立て続けに実行した後に、
どちらかが失敗したらcatch1のエラーログが出力するように書かれている。
そして最後の.then(result => console.log('then2:', result))は絶対に失敗しないのでcatch2のエラーログは多分一生拝めない。

つまり言ってる事と書いてるコードが違うってことね。
正確にはこうかな？

async1()
    .catch(error => console.error('catch1:', error))
    .then(result => {
        console.log('then1:', result)
        return async2()
    })
    .catch(error => console.error('catch2:', error))
    .then(result => console.log('then2:', result))

こうすればasync1で失敗すればcatch1が出るし、
async2で失敗すればcatch2が出るはず。

Comments

[murabito]

実はcatchブロックをthenより先に持ってくるのも試していたのですが、これだと、エラーが発生した時にまずcatchに入って、そのあと、catchがpromiseを返すからなのか、thenにその後、移ってしまうみたいなのですよね。catchでプロミスチェーンを切れれば良いのですが。

[murabito]

時間を置いて考えてみました。掲載いただいたコードの１つ目のcatchブロックで、`return Promise.reject(error)`してあげれば、期待通り、thenブロックには移らない。しかし、最後のcatchブロックに移ってしまうので、そこで渡ってきたエラーオブジェクト参照して、すでにハンドリング済みのものであれば何もしないという対応でひとまず行ってみようと思いました。

Answer 2

必要としているのは逐次処理で、下記リンク先が参考になると思います。

• 4.8. Promiseによる逐次処理 - JavaScript Promiseの本

Re: murabito さん

Comments

[murabito]

リンク先拝見いたしました。サンプルコードがcatch句１つのものなのですが、今回の私のケースのように、１つ目の非同期処理と２つ目の非同期処理で異なるエラーハンドリングを行う場合はどのようにすれば良いのでしょうか？単純な逐次処理であれば、質問文の最初の例の簡略版になりますが、```async1().then(async2).catch(console.error)```のようにすれば良いのかなとは思いますが。

[think49]

どのように…って、then,catchがある逐次処理のコードなので、そのまま実装すれば良いと思いますが、試してみましたか？

[think49]

ああ、元のコードでは catch() が共通処理になっているのを危惧していたのですか
再帰的に then() しているコードがあるので、そこで .catch() を加える修正を行えばよいと思います。

Answer 3

.then(A).catch(B).then(C)

catchで例外を発生されないという事は
例外が発生したが、正しくリカバリーできたとういう事なので
次のthenブロックが処理されます。

このような仕組みでなければ、例外が発生した時のリカバリーができないという事になります。

これを同期のような形で書くと分かりやすいと思います。

try{
  A
}
cathc(x){
  B  // ここで例外を発生されなければ、何らかのリカバリーが出来たという事なので次のCを実行します。
}

C

この事を理解していないとPromiseのチェーンは難しいです。

これを踏まえて、あなたがやりたいのは以下になります

1. async1、async2の例外は識別可能なものを例外として発生させる
2. catchで上記の例外の種類により処理を変える

try{
   async1();
   async2();
   console.log('success');  // ここで例外が発生する事もあるのでその場合はother
}catch(e){
   if(e instanceof ErrorAsync1){
      console.log('error1')
   }
   else if(e instanceof ErrorAsync2){
      console.log('error2')
   }else{
      console.log('other')
   }
}

これをPromiseで書くとこうなります。

Promise.resolve()
   .then(()=>async1())
   .then(()=>async2())
   .then(()=>{
      console.log('success')
   })
   .catch((e)=>{
      if(e instanceof ErrorAsync1){
         console.log('error1')
      }
      else if(e instanceof ErrorAsync2){
         console.log('error2')
      }else{
         console.log('other')
      }
   });

ここで問題になるのがasync1もasync2も自分が修正できる領域ではない場合です
その場合、各処理をcatchして例外を変える処理が必要になるので以下のようになるでしょう。

try{
   try{ 
      async1();
   }catch(e){
      throw new ErrorAsync1();
   }
   try{
      async2();
   }catch(e){
      throw new ErrorAsync2();
   }
   console.log('success');  // ここで例外が発生する事もあるのでその場合はother
}catch(e){
   if(e instanceof ErrorAsync1){
      console.log('error1')
   }
   else if(e instanceof ErrorAsync2){
      console.log('error2')
   }else{
      console.log('other')
   }
}

Promise.resolve()
   .then(()=>async1().catch(e=>throw new ErrorAsync1()))
   .then(()=>async2().catch(e=>throw new ErrorAsync2()))
   .then(()=>{
      console.log('success')
   })
   .catch((e)=>{
      if(e instanceof ErrorAsync1){
         console.log('error1')
      }
      else if(e instanceof ErrorAsync2){
         console.log('error2')
      }else{
         console.log('other')
      }
   });