用户登录

下面我们可以故意制造一个错误,经绍修改一下这个接口地址,换成一个不存在的接口地址。你会发现,在控制台上会提示 Uncaught Error,后面会有这个具体的错误。因为这次客户端请求的地址在服务端不存在,所以请求得到了一个状态码是 404 的响应,表示没找到。

这种在发送请求的时候出现的错误,你可能希望在应用里处理一下,也就是你的应用需要对这些错误情况做出不同的反应。比如给用户一个提示。

使用 axios 发送 http 请求会得到一个 Promise,成功兑现了这个承诺会执行 then 里提供的回调,如果发生了错误,会执行 catch 里的回调。所以这里可以再给它加上一个 catch。 提供一个回调参数,一个 error 参数,这里可以在控制台上输出 error 里的 message ,还有 error 里的 resposne。

在浏览器的控制台观察一下。你会发现,这次输出了错误信息,也就是 Request failed with status cod 404。

下面输出的是 error 里的 response ,也就是服务端应用做出的这个响应。 你可以在应用里利用这些东西让应用处理在请求的时候发生的不同的错误。比如你可以判断 error response 里的状态码,可以利用响应里的数据。

在这个组件里添加一个 errorMessage,默认让它等于一个空白的字符。 请求发生错误的时候可以设置一下组件里的 errorMessage ,让它等于 error 参数里的 message 这个属性的值。

然后在组件的模板里面,用一组 div,里面绑定输出组件里的 errorMessage 这个数据的值。 在浏览器上观察一下,现在界面上会显示请求的时候发生的错误。

处理在 Vue 应用里使用 axios 发送请求时发生的错误《 Vue.js 前端应用 #9:请求接口 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点