1. 程式人生 > 其它 >前端Uncaught (in promise) 的解決方法及原因

前端Uncaught (in promise) 的解決方法及原因

問題:在Vue專案中使用axios呼叫一個第三方的介面時,前端無法獲取到介面返回值,檢查控制檯Network發現介面請求已經正常發出並且有資料返回,但是控制檯Console報了這麼一個錯誤

上圖可以看到介面請求正常響應並有返回,控制檯卻一直報錯Uncaught (in promise)

排查一番之後發現,是介面響應攔截器裡面的問題,原本封裝好的請求方法裡面response.data.code == 0才算請求成功,因為我們自己這邊的介面請求成功時響應的code值為0,但是今天訪問的是第三方的介面,這個介面請求成功時返回的code值為200,從上圖可看出,所以這個請求的響應被攔截掉了,從而Promise.reject(rejection)報錯。

解決辦法:修改攔截器裡面的判斷,將code為200也視為成功(這裡根據實際介面返回做修改)

axios.interceptors.reponse.use(res => {
  // 請求成功對響應資料做處理,此處返回的資料是axios.then(res)中接收的資料
  if (res.code ==0 || res.code == 200) {
     // code值為 0 或 200 時視為成功
     return Promise.resolve(res)
  }
  return Promise.reject(res)
}, err => {
    // 在請求錯誤時要做的事兒
    ...
    
// 此處返回的資料是axios.catch(err)中接收的資料 return Promise.reject(err) })

修改完之後,前端就能正常拿到介面的返回值了。

以上方法可供參考,可能還有其他造成這個報錯的原因