vue axios請求成功卻進入catch的原因分析
問題：axios返回200狀態(tài)碼（即請求成功）卻走進了catch里面
原因：
1.當axios請求完成后走的時then的代碼塊，如果then代碼塊中存在錯誤代碼信息，這時就會進入catch中拋出異常（注意：此時控制臺并不會報錯，因為錯誤被catch捕獲了）
2.axios是異步發(fā)起，若發(fā)起后頁面刷新，那么就會丟失當前進程，導致接收不到。例如 form表單，點擊按鈕提交后，表單會刷新
補充知識：axios用catch的寫法與不使用catch有什么區(qū)別？
官網上的寫法：
axios.post(url, data)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
})
公司項目的寫法：
axios.post(url, data)
.then(response => {
console.log(response);
}, error => {
console.log(error);
})
之前一直沒有仔細研究過then和catch的寫法，事實上，這個不是 axios catch 的相關 而是關于 new Promise() 的then
阮一峰在 promise 文檔中有介紹。
一般來說，不要在then方法里面定義 Reject 狀態(tài)的回調函數（即then的第二個參數），總是使用catch方法。
// bad
promise
.then(function(data) {
// success
}, function(err) {
// error
});
// good
promise
.then(function(data) { //cb
// success
})
.catch(function(err) {
// error
});
上面代碼中，第二種寫法要好于第一種寫法，理由是第二種寫法可以捕獲前面then方法執(zhí)行中的錯誤，也更接近同步的寫法（try/catch）。因此，建議總是使用catch方法，而不使用then方法的第二個參數。
公司的寫法無法catch第一個參數的異常。
這樣寫可能容易看懂一些：
axios.post(url, data)
.then(response => {
//處理邏輯
}, error => {
console.log('接口報錯');
})
.catch(error=>{
console.log('處理邏輯出錯');
})
axios.post(url, data)
.then(response => {
//處理邏輯
})
.catch(error=>{
console.log('接口或處理邏輯出錯');
})
以上這篇vue axios請求成功卻進入catch的原因分析就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
- vue-axios同時請求多個接口 等所有接口全部加載完成再處理操作
- 解決vue 使用axios.all()方法發(fā)起多個請求控制臺報錯的問題
- 解決vue項目axios每次請求session不一致的問題
- vue+axios 攔截器實現(xiàn)統(tǒng)一token的案例
- Vue.js使用axios動態(tài)獲取response里的data數據操作
- Vue axios 跨域請求無法帶上cookie的解決
- 解決vue中axios設置超時(超過5分鐘)沒反應的問題
- 在vue中axios設置timeout超時的操作
- Vue中 axios delete請求參數操作
- Vue3配置axios跨域實現(xiàn)過程解析
相關文章
vue.js的狀態(tài)管理vuex中store的使用詳解
今天小編就為大家分享一篇vue.js的狀態(tài)管理vuex中store的使用詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
el-table-column疊加el-popover使用示例小結
el-table-column有一列展示多個tag信息,實現(xiàn)點擊tag展示tag信息以及tag對應的詳細信息,本文通過示例代碼介紹el-table-column疊加el-popover使用示例小結,感興趣的朋友跟隨小編一起看看吧2024-04-04
element-ui?table使用type='selection'復選框全禁用(全選禁用)詳解
element-ui中的table的多選很好用,但是如果其中某一項禁止選擇,該怎樣操作呢,下面這篇文章主要給大家介紹了關于element-ui?table使用type='selection'復選框全禁用(全選禁用)的相關資料,需要的朋友可以參考下2023-01-01
vue3+vant4實現(xiàn)pdf文件上傳與預覽組件
這篇文章主要介紹了vue3如何結合vant4實現(xiàn)簡單的pdf文件上傳與預覽組件,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2025-04-04
這篇文章主要介紹了Vue3中依賴注入provide、inject的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue百度地圖修改折線顏色,添加icon和文字標注方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
今天小編就為大家分享一篇Vue實現(xiàn)導航欄的顯示開關控制，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
在日常業(yè)務開發(fā)中我們會經常封裝一些業(yè)務組件,下面這篇文章主要給大家介紹了關于Vue組件的實現(xiàn)原理,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
在最近的項目中遇到了一個需求,找了相關資料后終于實現(xiàn),這篇文章主要給大家介紹了關于vue-cli多頁面應用實踐之實現(xiàn)組件預覽項目的相關資料,需要的朋友可以參考下2022-05-05
解決Vue+Element ui開發(fā)中碰到的IE問題
今天小編就為大家分享一篇解決Vue+Element ui開發(fā)中碰到的IE問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09