为什么fetch会给出这样的响应？

Question

当我在控制台中检查时，我从fetch中获得了这种响应，如图所示。但是，当我从devtool Network检查时，它会显示正确的错误响应。关于如何处理这个的任何想法？

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

您需要解析对JSON的响应，以查看与您在网络标签中看到的内容相匹配的响应。

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);
});

使用fetch时，您可以看到原始响应，这是您的屏幕截图，然后您可以将其解析为JSON，以便按预期查看响应的正文。这允许对错误处理，响应等进行更精细的控制。

Answer 2

您还可以使用axios来解决您的response，而不必手动reject 400 catch serviceWorkerRegistration.showNotification(title, options); 1}}错误，它会转到title。