Pourquoi chercher donne une réponse comme ça?

Question

J'ai obtenu ce genre de réponse de chercher quand je l'inspecte dans la console, comme le montre l'image. Cependant, quand je vérifie à partir du devtool Network, il montre la réponse d'erreur correcte. Une idée sur la façon de faire face à cela?

export function loginRequest(data){ 
    return (dispatch, getState) => { 
    let tmp = Object.assign({},data)  
    var request = new Request('https://aaa.com/json', { 
     method: 'POST', 
     mode: 'cors', 
     headers: new Headers({ 
     'Content-Type': 'text/plain' 
     }) 
    }); 
    fetch(request).then((res)=>{   
     alert(JSON.stringify(res)) 
     dispatch({ 
     type: types.LOGIN, 
     data: res 
     }) 
    }).catch(err =>{ 

      alert(JSON.stringify(err)) 
      alert(err.errMsg) 
      dispatch({ 
      type: types.LOGIN, 
      data: data 
     }) 
     console.log(JSON.stringify(err)) 
    }) 

    } 
} 

Answer 1

Vous devez analyser la réponse à JSON pour voir la réponse qui correspond à ce que vous voyez dans l'onglet réseau.

fetch('//offline-news-api.herokuapp.com/stories') 
// First you can deal with the response, checking status code, headers, etc. 
.then(function(response) { 
    if (response.status >= 400) { 
     throw new Error("Bad response from server"); 
    } 

    // This is the line you are missing 
    return response.json(); 
}) 
// Now you will see the proper JSON response that should match 
// what you see in the network tab. 
.then(function(stories) { 
    console.log(stories); 
}); 

Lorsque vous utilisez fetch, vous pouvez voir la réponse brute, ce qui est ce que votre capture d'écran semble être, et vous pouvez l'analyser à JSON pour voir le corps de la réponse que vous attendez. Cela permet plus fine le contrôle de la gestion des erreurs, des réponses, etc.

Answer 2

Vous pouvez également utiliser axios où vous ne devez pas analyser votre response et ne pas manuellement reject s'il y a des erreurs 400, il ira à catch à la place.