如何從javascript Fetch api獲取可讀的錯誤響應？

Question

我正在使用前端的Reactjs redux和Rails api作爲後端。

所以，現在我打電話API與提取API方法，但問題是我不能讓可讀的錯誤消息，像我的網絡選項卡

這是我的功能

export function create_user(user,userInfoParams={}) { 

    return function (dispatch) { 
     dispatch(update_user(user)); 

     return fetch(deafaultUrl + '/v1/users/', 
      { 
       headers: { 
        'Accept': 'application/json', 
        'Content-Type': 'application/json' 
       }, 
       method: "POST", 
       body: JSON.stringify(userInfoParams) 
      }) 
      .then(function(response) { 
       console.log(response); 
       console.log(response.body); 
       console.log(response.message); 
       console.log(response.errors); 
       console.log(response.json()); 
       dispatch(update_errors(response)); 

       if (response.status >= 400) { 
        throw new Error("Bad response from server"); 
       } 

      }) 
      .then(function(json){ 
       console.log("succeed json re"); 
       // We can dispatch many times! 
       // Here, we update the app state with the results of the API call. 

       dispatch(update_user(json)); 

      }); 


    } 
} 

內得到但當錯誤來了我無法弄清楚如何獲得可讀的響應消息，比如當我檢查我的瀏覽器網絡選項卡時

因此，這是我從網絡選項卡獲得錯誤時所得到的結果。

我的控制檯

這是我的Rails代碼

def create 
    user = User.new(user_params) 
    if user.save 
     #UserMailer.account_activation(user).deliver_now 
     render json: user, status: 201 
    else 
     render json: { errors: user.errors }, status: 422 
    end 
    end 

但我不能找到我怎樣才能得到我的函數內部

謝謝！

Answer 1

您返回的變量不在response.body或response.message中。

您需要檢查響應對象上的錯誤屬性。

if(response.errors) { 
    console.error(response.errors) 
} 

入住這裏https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

你實際上應返回來自服務器的錯誤響應代碼和使用fetch API

Answer 2

首先，你需要調用JSON方法您迴應的.catch()功能。

一個例子：

fetch(`${API_URL}`, { 
     method: 'post', 
     headers: { 
      'Accept': 'application/json', 
      'Content-Type': 'application/json' 
     }, 
     body: JSON.stringify(userInfoParams) 
    }) 
    .then((response) => response.json()) 
    .then((response) => console.log(response)) 
    .catch((err) => { 
     console.log("error", err) 
    }); 

讓我知道控制檯日誌，如果它不爲你工作。

Answer 3

好吧，我想我終於破解了這個。

文本被隱藏在響應對象的承諾內，所以需要像處理承諾一樣處理它。

fetch(bla) 
    .then(res => { 
     if(!res.ok) { 
     res.text().then(text => throw Error(text)) 
     } 
     else { 
     return res.json(); 
    }  
    }) 
    .catch(err => { 
     console.log('caught it!',err); 
    } 

Answer 4

到你的答案相似，但多一點的解釋......我第一次檢查，如果響應是OK，然後生成從response.text()錯誤只對我們有一個成功的響應情況。因此，網絡錯誤（不是ok）仍然會在不轉換爲文本的情況下生成自己的錯誤。然後這些錯誤被捕獲到下游catch。

這裏是我的解決方案 - 我把核心讀取功能爲包裝函數：

const fetchJSON = (...args) => { 
    return fetch(...args) 
    .then(res => { 
     if(res.ok) { 
     return res.json() 
     } 
     return res.text().then(text => {throw new Error(text)}) 
    }) 
} 

後來，當我使用它，我定義如何根據需要在那個時候處理我的迴應和錯誤：

fetchJSON(url, options) 
    .then((json) => { 
    // do things with the response, like setting state: 
    this.setState({ something: json }) 
    }) 
    .catch(error => { 
    // do things with the error, like logging them: 
    console.error(error) 
    })