web-dev-qa-db-ja.com

関数からAxios Promiseを返す

Axios promiseを返すことでさらにチェーンが可能になるが、then()/catch()メソッドを適用した後に戻ることができない理由を誰かが説明できますか？

例：

const url = 'https://58f58f38c9deb71200ceece2.mockapi.io/Mapss'
    
function createRequest1() {
  const request = axios.get(url)

  request
  .then(result => console.log('(1) Inside result:', result))
  .catch(error => console.error('(1) Inside error:', error))

  return request
}

function createRequest2() {
  const request = axios.get(url)

  return request
  .then(result => console.log('(2) Inside result:', result))
  .catch(error => console.error('(2) Inside error:', error))
}

createRequest1()
.then(result => console.log('(1) Outside result:', result))
.catch(error => console.error('(1) Outside error:', error))

createRequest2()
.then(result => console.log('(2) Outside result:', result))
.catch(error => console.error('(2) Outside error:', error))
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>

https://jsfiddle.net/nandastone/81zdvodv/1/

Promiseメソッドは連鎖する値を返す必要があることを理解していますが、なぜこれら2つの戻りメソッドに違いがあるのですか？

javascriptpromiseaxios
25
Matt Stone

最初の例は、元のプロミスを返します。 2番目の例は、catchを呼び出して作成されたdifferentpromiseを返します。

2つの重要な違いは次のとおりです。

  1. 2番目の例では、解決値を渡していないため、thenによって返されるpromiseは、undefined（console.logの戻り値）で解決されます。

  2. 2番目の例では、undefinedを使用して拒否を解像度に変換しています（catchからconsole.logの結果を返すことによって）。拒否されたプロミスをスローまたは返さないcatchハンドラーは、拒否を解決に変換します。

Promiseチェーンの重要なことの1つは、結果を変換することです。 thenまたはcatchを呼び出すたびに新しいプロミスが作成され、ハンドラーは結果が通過するときにダウンストリームに送信されるものを変更できます。

実際の通常のパターンは、チェーンの結果を返すことですが、チェーン内の関数が意図的に結果を変換するか渡すことです。通常、エラー状態を修正するために（意図的に拒否を解決に変換するために）使用しない限り、チェーンの終端以外にcatchハンドラーはありません。

通過したものをログに記録するだけで、呼び出し側はそれを見ることができるが、did何らかの理由でチェーンの結果を返したい場合は、 dこれを行う：

return request
    .then(result => { console.log(result); return result; })
    .catch(error => { console.error(error); return Promise.reject(error); });

またはthrowを使用：

return request
    .then(result => { console.log(result); return result; })
    .catch(error => { console.error(error); throw error; });
60
T.J. Crowder