# 接不到正確的錯誤訊息

## 目標:

發送新增會員的API後, 取得後端給的錯誤訊息

在註冊新會員頁面中,需要避免新增重複的會員帳號或是email,
經過後端驗證後應回傳正確的錯誤訊息,
以利前端判斷, 並反應正確的錯誤資訊給使用者,
ex. 回傳"帳號已經註冊過了!"來提醒使用者

## 遇到的問題與嘗試:

1. 在Postman中確認API是否真的有給錯誤訊息

API為POST /users/ (新增使用者)
刻意輸入已註冊過的帳號(紅色框)
錯誤訊息會出現: account重複註冊!

2. 在知道API會給錯誤訊息後, 檢查自己的程式碼

嘗試在try catch中的catch取得錯誤訊息
並在瀏覽器中觀察console.

[code github(244行)](https://github.com/DanielGG1024/twitter-front-end-vue/blob/main/src/views/Regist.vue)
3. 在註冊頁輸入與Postman一樣的值,
觀察印出的console.log()(綠色框)


放大一點

NetWork中的response

由此可知真的真的有response只是我拿不到!!

## 但在error.message中並不是出現預期的"重複註冊"只是出現409(conflict)

## 解決方法:
stackoverflow:<br>

https://stackoverflow.com/questions/39153080/how-can-i-get-the-status-code-from-an-http-error-in-axios

在catch(error)中加入

if (error.response) {
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    }

可以再

error.response.data

中接到正確錯誤訊息


## 解決當下問題之後

雖然成功解決這問題但還是非常疑惑,
為什麼一開始的 `console.log(error)`
無法看到原來
error中還有response
response中還有data

目前也只是理解可能 console.log()沒有辦法看到error的全貌 繼續找答案中

## Review

1. 是因為 console.log 本身回傳的是字串，所以在內部會執行 toString 方法，來將 error 物件轉型成字串，如果想要印出整個完整的 error 物件，可以使用" `console.dir` "的方式，就可以印出整個物件包和它的屬性了。


2. 此外在程式碼第 244 行開始，可以看到使用 switch case 的方式去判斷每個錯誤資訊，再利用 Toast.fire 去將錯誤訊息顯示給使用者，其實只要進入到 catch(error) 那段，就知道有錯誤發生了，再直接將 message 傳給 Toast.fire 即可，如下：

Toast.fire({
  icon: "warning",
  title: error.message,
}); 

原始程式碼為:
一大包switch