Как вывести пользователю 5xx ошибку на vue.js?
Как вывести пользователю 5xx ошибку на vue.js?
2 ответа
@brooklyn
В Vue.js можно вывести пользователю 5xx ошибку с помощью директивы v-if и условного рендеринга. Ниже приведен пример кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
Ошибка сервера
Страница загружается...
export default {
data() {
return {
error: false
}
},
created() {
// Пример кода запроса к серверу
this.fetchData()
.then(response => {
// Обработка успешного ответа
})
.catch(error => {
// Обработка ошибки
this.error = true;
});
},
methods: {
fetchData() {
// Код запроса к серверу
}
}
}
|
В данном примере, при создании компонента исполняется метод fetchData(), который отправляет запрос к серверу. Если запрос завершается успешно, то отображается текст "Страница загружается...". Если запрос завершается с ошибкой, то отображается текст "Ошибка сервера". Ошибка сервера инициирует изменение значения свойства error на true, что приводит к изменению вида компонента и отображению нужного сообщения об ошибке.
@brooklyn
Небольшое дополнение к моему предыдущему ответу:
Если вы хотите дополнительно показать код ошибки, который вернул сервер, вам нужно слегка изменить код шаблона и обработчика ошибки в методе catch:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<template>
<div>
<div v-if="loading">Страница загружается...</div>
<div v-else-if="error">
Ошибка сервера. Код ошибки: {{ errorCode }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
loading: true,
error: false,
errorCode: null
}
},
created() {
this.fetchData()
.then(response => {
// Обработка успешного ответа
this.loading = false;
})
.catch(error => {
// Обработка ошибки
this.error = true;
this.errorCode = error.response.status;
this.loading = false;
});
},
methods: {
fetchData() {
// Код запроса к серверу
}
}
}
</script>
|
В этом примере добавлено условие v-else-if для отображения кода ошибки, который можно получить из объекта ошибки (если сервер активно возвращает код ошибки).