快捷導(dǎo)航

vue axios請求成功卻進(jìn)入catch的原因分析

更新時(shí)間：2020年09月08日 11:28:40 作者：林景之

這篇文章主要介紹了vue axios請求成功卻進(jìn)入catch的原因分析，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

問題：axios返回200狀態(tài)碼（即請求成功）卻走進(jìn)了catch里面

原因：

1.當(dāng)axios請求完成后走的時(shí)then的代碼塊，如果then代碼塊中存在錯(cuò)誤代碼信息，這時(shí)就會進(jìn)入catch中拋出異常（注意：此時(shí)控制臺并不會報(bào)錯(cuò)，因?yàn)殄e(cuò)誤被catch捕獲了）

2.axios是異步發(fā)起，若發(fā)起后頁面刷新，那么就會丟失當(dāng)前進(jìn)程，導(dǎo)致接收不到。例如 form表單，點(diǎn)擊按鈕提交后，表單會刷新

補(bǔ)充知識：axios用catch的寫法與不使用catch有什么區(qū)別？

官網(wǎng)上的寫法：

axios.post(url, data)
  .then(response => {
    console.log(response);
  })
  .catch(error => {
      console.log(error);
  })

公司項(xiàng)目的寫法：

axios.post(url, data)
  .then(response => {
    console.log(response);
  }, error => {
    console.log(error);
  })

之前一直沒有仔細(xì)研究過then和catch的寫法，事實(shí)上，這個(gè)不是 axios catch 的相關(guān) 而是關(guān)于 new Promise() 的then

阮一峰在 promise 文檔中有介紹。

一般來說，不要在then方法里面定義 Reject 狀態(tài)的回調(diào)函數(shù)（即then的第二個(gè)參數(shù)），總是使用catch方法。

// bad
promise
 .then(function(data) {
  // success
 }, function(err) {
  // error
 });

// good
promise
 .then(function(data) { //cb
  // success
 })
 .catch(function(err) {
  // error
 });

上面代碼中，第二種寫法要好于第一種寫法，理由是第二種寫法可以捕獲前面then方法執(zhí)行中的錯(cuò)誤，也更接近同步的寫法（try/catch）。因此，建議總是使用catch方法，而不使用then方法的第二個(gè)參數(shù)。

公司的寫法無法catch第一個(gè)參數(shù)的異常。

這樣寫可能容易看懂一些：

axios.post(url, data)
  .then(response => {
    //處理邏輯
  }, error => {
    console.log('接口報(bào)錯(cuò)');
  })
  .catch(error=>{
    console.log('處理邏輯出錯(cuò)');
  })

axios.post(url, data)
  .then(response => {
    //處理邏輯
  })
  .catch(error=>{
    console.log('接口或處理邏輯出錯(cuò)');
  })

以上這篇vue axios請求成功卻進(jìn)入catch的原因分析就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue中的Vux配置指南
Vux是Vue.js的一個(gè)ui庫，官網(wǎng)在這里，官方文檔的配置指南側(cè)重于技術(shù)的羅列，我這里簡化一下Vux的配置流程。感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧
2017-12-12
Element DateTimePicker日期時(shí)間選擇器的使用示例
這篇文章主要介紹了Element DateTimePicker日期時(shí)間選擇器的使用示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
vue打包使用Nginx代理解決跨域問題
這篇文章主要介紹了vue打包使用Nginx代理解決跨域問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-08-08
Vue2.0學(xué)習(xí)之詳解Vue 組件及父子組件通信
本篇文章主要介紹了Vue2.0學(xué)習(xí)之詳解Vue 組件及父子組件通信，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-12-12
vue中的可拖拽寬度div的實(shí)現(xiàn)示例
本文主要介紹了vue中的可拖拽寬度div的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
Vue.js每天必學(xué)之?dāng)?shù)據(jù)雙向綁定
Vue.js每天必學(xué)之?dāng)?shù)據(jù)雙向綁定，如何進(jìn)行綁定，如何進(jìn)行數(shù)據(jù)雙向綁定，感興趣的小伙伴們可以參考一下
2016-09-09
vue.js使用代理和使用Nginx來解決跨域的問題
下面小編就為大家分享一篇vue.js使用代理和使用Nginx來解決跨域的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
Vue的生命周期操作示例
這篇文章主要介紹了Vue的生命周期操作,結(jié)合實(shí)例形式分析了vue生命周期中各個(gè)函數(shù)的運(yùn)行步驟,需要的朋友可以參考下
2019-09-09
Vue TypeScript使用eval函數(shù)遇到的問題
近幾年前端對 TypeScript的呼聲越來越高，Typescript也成為了前端必備的技能。TypeScript是JS類型的超集，并支持了泛型、類型、命名空間、枚舉等特性，彌補(bǔ)了 JS 在大型應(yīng)用開發(fā)中的不足
2023-01-01
vue結(jié)合leaflet實(shí)現(xiàn)熱力圖
本文主要介紹了vue實(shí)現(xiàn)熱力圖，結(jié)合leaflet.heat插件可以很容易的做出熱力圖，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-06-06