如何处理Vuejs上下文中的axios错误 [英] How to handle the axios errors in the context of Vuejs
问题描述
我想在我的 API 返回任何错误时显示/打印已禁用"，并在它以 200 ok 状态成功返回时显示已启用".
这是我的 API 返回的内容:
所以，我的 API 当前返回错误，所以我想打印/显示已禁用".
我是如何做到的:
<div class="api_data"><span class="trick_not_ok";v-if=错误">{{error}}</span><span class="trick_ok";v-if="noerror">{{noerror}}</span><脚本>从 'axios' 导入 axios导出默认{名称:Api_data,数据 () {返回 {错误: []，无错误:[]}},创建(){axios.get('...URL...').then((响应) => {控制台日志(响应数据)this.noerror = '启用'}).catch((错误) => {如果(错误){控制台日志(错误)this.error = '已禁用'}})}}
但我的屏幕上没有打印/显示任何内容，并且我在控制台中收到错误为 GET ...URL... 401 (UNAUTHORIZED)，我如何显示已禁用"时当我的 API 成功返回时，我的 API 返回错误和已启用".
注意:我也尝试过 .catch as if (error.response.status) 和 if (error.status) 但两者都不起作用，我在控制台中遇到了同样的错误.
请有人帮我解决这个问题.
这里是一个 codepen 解决方案，我会用它来解决你的麻烦.使用布尔值选择状态，然后使用字符串作为要显示的消息.
new Vue({el: "#app",数据 () {返回 {isError: 假,无错误:假，消息:'加载'}},创建(){axios.get('...URL...').then((响应) => {控制台日志(响应数据)this.noerror = truethis.message = '启用'}).catch((错误) => {如果(错误){控制台日志(错误)this.isError = 真this.message = '禁用'}})},方法: {切换:功能(待办事项){todo.done = !todo.done}}})<div class="api_data"><span class="trick_not_ok" v-if="isError">{{message}}</span><span class="trick_ok" v-if="noerror">{{message}}</span>I want to display/print 'Disabled' when ever my API returns any error and display 'Enabled' when it is returning successfully with 200 ok status.
Here's what my API is returning:
So, my API is returning error currently, so i want to print/display 'Disabled'.
Here how i did it:
<template>
<div class="api_data">
<span class="trick_not_ok" v-if="error" >{{error}}</span>
<span class="trick_ok" v-if="noerror" >{{noerror}}</span>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: Api_data,
data () {
return {
error: [],
noerror: []
}
},
created() {
axios.get('...URL...')
.then((response) => {
console.log(response.data)
this.noerror = 'Enabled'
})
.catch((error) => {
if (error) {
console.log(error)
this.error = 'Disabled'
}
})
}
}
</script>
But nothing is printed/displayed on my screen, and i am getting error in my console as GET ...URL... 401 (UNAUTHORIZED), How do i display 'Disabled' when my API returns error and 'Enabled' when my API is returning successfully.
Note: I have also tried in .catch as if (error.response.stastus) and if (error.status) but both did not work and i am getting the same error in my console.
Someone please do help me with this.
Here is a codepen solution that I'd use for your trouble. Using boolean for selecting the status and then string for the message you want to display.
new Vue({
el: "#app",
data () {
return {
isError: false,
noerror: false,
message:'loading'
}
},
created() {
axios.get('...URL...')
.then((response) => {
console.log(response.data)
this.noerror = true
this.message = 'enabled'
})
.catch((error) => {
if (error) {
console.log(error)
this.isError = true
this.message = 'disabled'
}
})
},
methods: {
toggle: function(todo){
todo.done = !todo.done
}
}
})
<div id="app">
<div class="api_data">
<span class="trick_not_ok" v-if="isError">{{message}}</span>
<span class="trick_ok" v-if="noerror">{{message}}</span>
</div>
</div>
这篇关于如何处理Vuejs上下文中的axios错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
