約束は#thenと#jsonでどのように機能しますか？

Question

私は最初の例がなぜ機能するのか混乱していますが、2番目の例はなぜそうではありません。私はそれがjsonを呼び出すと関係があると信じて、javascriptオブジェクトへの応答を解決しますか？だから、それはその機能に置かなければならない約束を返すのだろうか？私は3番目の例で投げられたエラーのためにこれを得ます。 #jsonは何を正確に行いますか？

export const promiseErrorMiddleware = store => next => action => { 
    const url = action.url 
    const fetchName = action.fetchName 
    return Promise.resolve(fetch(url)).then((response) => { 
    return response.json() 
    }).then((data) => { 
    store.dispatch({data: data, needDirection: true, fetchName: fetchName }) 
    }) 
} 

//works 

export const promiseErrorMiddleware = store => next => action => { 
    const url = action.url 
    const fetchName = action.fetchName 
    return Promise.resolve(fetch(url)).then((response) => { 
    store.dispatch({data: response.json(), needDirection: true, fetchName: fetchName }) 
    }) 
} 

//doesn't work 

export const promiseErrorMiddleware = store => next => action => { 
    const url = action.url 
    const fetchName = action.fetchName 
    return Promise.resolve(fetch(url)).then((response) => { 
    console.log(resopnse.json()) 
    return response.json() 
    }).then((data) => { 
    store.dispatch({data: data, needDirection: true, fetchName: fetchName }) 
    }) 
} 

//throws error 

Answer 1

response.json()約束を返します。あなたはすぐにその結果を使用することはできません、あなたは約束を解決するのを待つ必要があります。

また、Promise.resolve()を使用する必要はありません。 fetch()はすでに約束を返しています。

{data: data}の代わりに{data}と書くことができます。これはshorthand property namesと呼ばれます。

json()メソッドを2回呼び出すことができないため、3番目の例ではエラーが発生します。