前端項目中報錯Uncaught?(in?promise)的解決方法
項目中報錯 Uncaught (in promise)
一、問題:當你調(diào)用 Promise.reject() 回調(diào)的時候,Chrome 控制臺中出現(xiàn)一條警告消息“Uncaught (in promise)”。
例如你簡單封裝axios的響應(yīng)攔截器的時候:
// 響應(yīng)攔截 service.interceptors.response.use((res)=>{ const code:number=res.data.data.code if(code!=200){ return Promise.reject(res.data.data.msg) } return res.data.data },(err)=>{ console.log(err); })
以一個登錄提交的方法為例,當你只使用.then,并且走到了 return Promise.reject() 的區(qū)間:
(我是在學ts的時候遇到的,如果你是在js里面遇到問題的話,只需要把類型去掉看就可以了)
const submitForm = (formEl: FormInstance | undefined) => { if (!formEl) return; formEl.validate((valid) => { if (valid) { login(data.ruleForm).then((res:object)=>{ console.log(res); }) } else { console.log("error submit!"); return false; } }); };
控制臺錯誤如圖:
二、原因:發(fā)生這種情況就是因為您沒有將捕獲處理程序附加到 then 返回的 promise 中方法,因此在 promise 拒絕時沒有處理程序。
如果onRejected處理程序沒有顯式地提供給.then(onResolved, onRejected)方法,JS會自動提供一個隱式的。它看起來是這樣的:(err) => throw err。自動生成的處理程序?qū)⒃谄浠睾现袙伋觥?/p>
在 promise 鏈中,可以使用 catch 捕獲此錯誤方法回調(diào),但如果不存在,JavaScript 引擎將像處理任何其他 Uncaught Error 一樣處理錯誤,并在這種情況下應(yīng)用默認處理程序,這會導致您在控制臺中看到輸出。
三、處理方法:只需要在調(diào)用的時候在.then后面加上.catch對異常情況進行捕獲并進行處理即可。
還是上面那個登錄方法
1.這是使用.then的處理方法
const submitForm = (formEl: FormInstance | undefined) => { if (!formEl) return; formEl.validate((valid) => { if (valid) { login(data.ruleForm).then((res:object)=>{ console.log(res); }) .catch((err:any)=>{ console.log(err); }) } else { console.log("error submit!"); return false; } }); };
2.這是使用 async 和 await 進行修飾的處理方法(需要用到 try catch)
const submitForm = (formEl: FormInstance | undefined) => { if (!formEl) return; formEl.validate(async (valid) => { if (valid) { try{ let res = await login(data.ruleForm) console.log(res); }catch(err:any){ console.log(err); } } else { console.log("error submit!"); return false; } }) };
此時控制臺輸出的就是你的處理結(jié)果,不會再出現(xiàn) Uncaught (in promise) 了。
參考:https://stackoverflow.com/questions/42460039/promise-reject-causes-uncaught-in-promise-warning
總結(jié)
到此這篇關(guān)于前端項目中報錯Uncaught(in promise)解決的文章就介紹到這了,更多相關(guān)前端報錯Uncaught(in promise)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js實現(xiàn)瀑布流觸底動態(tài)加載數(shù)據(jù)
這篇文章主要為大家詳細介紹了js實現(xiàn)瀑布流觸底動態(tài)加載數(shù)據(jù),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09通過seajs實現(xiàn)JavaScript的模塊開發(fā)及按模塊加載
seajs實現(xiàn)了JavaScript 的 模塊開發(fā)及按模塊加載。用來解決繁瑣的js命名沖突,文件依賴等問題,其主要目的是令JavaScript開發(fā)模塊化并可以輕松愉悅進行加載。下面我們來一起深入學習下吧2019-06-06JavaScript中對象property的讀取和寫入方法介紹
這篇文章主要介紹了JavaScript中對象property的讀取和寫入方法介紹,本文講解了原型繼承鏈中property的讀取、原型繼承鏈中property的寫入等內(nèi)容,需要的朋友可以參考下2014-12-12sass 中使用 /deep/ 修改 elementUI 組件樣式報錯
這篇文章主要介紹了sass 中使用 /deep/ 修改 elementUI 組件樣式報錯的解決方案,嘗試用 ::v-deep 替換 /deep/ ,成功解決了問題,感興趣的朋友跟隨小編一起看看吧2024-02-02JavaScript中offsetWidth的bug及解決方法
這篇文章主要為大家詳細介紹了JavaScript中offsetWidth的bug及解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-05-05Web性能優(yōu)化系列 10個提升JavaScript性能的技巧
Javascript 性能優(yōu)化絕不是一種書面的技術(shù),Nicholas 的技術(shù)演進列出了10條建議,幫助你寫出高效的 JS 代碼2016-09-09