【问题标题】:Axios catches error then something throws the error again [duplicate]Axios 捕获错误然后再次抛出错误 [重复]
【发布时间】:2019-04-16 19:31:44
【问题描述】:

我有这个方法:

服务

const errorData = {"message":"Error", "data": []};

list(url) {
  return new Promise((resolve) => {
    axios.get(url).then((response) => {
      resolve(response.data);
    }).catch((error) => {
      resolve(errorData)
    });
  })
},

模块存储

 state: {
    list: []
 },
 getters: {
        list: state => state.list,
 },
 mutations: {
    LIST(state, payload) {
       state.list = payload || [];
    },
 }
actions: {
   list({ commit }) {
     commit('LIST', []);

     return service
          .list('api/list')
          .then((list) => {
           commit('LIST', list);
           });
    },
}

列表组件

this.$store.dispatch(`module/store/list`).then(() => {
     setTimeout(() => {
         var message = this.$store.getters['module/list'].message;
         this.$refs.inform.open('Error', message).then(() => {
             this.$router.push ({ path: "/" });
         });
     }, 1000);
})

注意:成功 API 调用的 response.data 返回一个与 errorData 结构相同的对象。

当我关闭调用 API 方法的服务器时,Axios 会捕获错误(如果有),但会引发错误并停止应用程序的当前操作“net::ERR_CONNECTION_REFUSED”。我不知道在哪里抓到这个。我尝试使用与此相关的 Axios 对所有方法附加捕获,但后来我无法捕获错误。当错误最初被 Axios 捕获时,它应该停止,而不停止应用程序的操作。

我非常感谢任何可以解决我的这个问题的建议。谢谢。

【问题讨论】:

  • axios 默认返回一个promise,是否有理由将它再次包装在promise 中?
  • @RajaSekar 我遵循一些代码标准 :)
  • 正如在副本中指出的那样,您无法阻止浏览器记录 net::ERR_CONNECTION_REFUSED 错误。我很好奇你为什么认为这会阻止你的申请。您如何使用list()?您想要发生的事情与实际发生的事情是什么?
  • @Phil 哦,所以浏览器记录错误是不可避免的。谢谢你帮我清理了那个。我正在使用模块存储中的 list() ,我的问题中的代码就像我的主服务文件中 get 方法的全局调用者。至于我的应用程序停止,在浏览器控制台中记录错误后,它应该向列表返回一条消息并在弹出消息中显示它,但事实并非如此。页面为空白,列表未呈现在屏幕上。我编辑了我的问题以澄清这一点:D

标签: javascript vue.js axios


【解决方案1】:

您不应该解决错误。我假设调用 list 方法的代码不会将错误作为 promise 结果,是吗?

万一出现错误,promise 必须被拒绝,或者你可能想捕获错误并使用默认值解决,但使用错误解决没有多大意义。

您还可以像这样简化代码:

list(url) {
  return axios.get(url).then((response) => {
    return response.data;
  }).catch((error) => {
    return { items: [] }; // <--- default value
  });
}

【讨论】:

  • 我刚试过这个,net::ERR_CONNECTION_REFUSED 还在,操作停止了。
【解决方案2】:

先检查数据库连接

试试这个

async list(url){
  try {
    return await axios.get(url);
  } catch(e) {
    console.log('This is error:->', e);
  }
}

【讨论】:

  • 感谢您的回答,不幸的是这对我不起作用。
【解决方案3】:

你可以试试下面的:

catch(error => {
        if (!error.response) {
            // network error
            this.errorStatus = 'Error: Network Error';
        } else {
            this.errorStatus = error.response.data.message;
        }
      })

【讨论】:

  • 您好,感谢您的回答,但错误仍然存​​在并停止应用当前的操作。
  • 我可以知道您的应用程序运行停止的原因吗?因为您可以使用我的代码捕获网络错误,然后您必须在该网络错误块中处理其余的事情。
  • 这就是我想知道的。我不知道它是从哪里来的,这就是为什么我想以任何可能的方式抓住它。
猜你喜欢
  • 2019-04-13
  • 2020-01-13
  • 1970-01-01
  • 2023-03-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-06-30
相关资源
最近更新 更多