Мне трудно разобраться с конкретным случаем ошибки, и мое понимание обещаний неверно.Центральная обработка ошибок в Axios Interceptor, обрабатывает все мои вызовы API и большинство моих ошибок, это выглядит так:
export function apiFactory(vue, $security) {
const $http = axios.create({
baseURL: process.env.API_URL
});
$http.interceptors.request.use(function (config) {
const token = $security.loginFrame.getToken();
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}, function (err) {
vue.$eventBus.$emit('toastMessageHandler', {message: error.message, type: 'error'});
return Promise.reject(err);
});
$http.interceptors.response.use(function (response) {
return response;
}, function (error) {
if (error.response && error.response.status === 401) {
vue.$eventBus.$emit('authErr', error);
} else if (error.response && error.response.status === 403) {
alert('you are not authorized, please contact EM support');
}
else if (error.response && error.response.status !== 409){
vue.$eventBus.$emit('toastMessageHandler', {message: error.message, type: 'error'});
}
return Promise.reject(error);
});
Это работает хорошо для большинства случаев, но в одном случае, когда я делаю этот APIcall:
async createSearchTerm(term) {
return await this.$http({
url: `/v1/searchTerms/term`,
method: 'POST',
data: JSON.stringify(term)
})
}
Ошибка 409
, которую я пытаюсь отловить, не достигает компонента, мой код в компоненте выглядит следующим образом:
async addTag() { //needs better error handling, make sure loader changes in cases of fail.
if (this.newTag.length > 0) {
this.loading = true
this.$emit('loading', true)
const payload = {
term: this.newTag,
term_type: this.type,
partner_code: this.query.partner_code,
language: this.query.language
}
try {
await this.apiFacade.createSearchTerm(payload); //this is the call directly above, it just goes through a facade.
this.$emit('loading', false)
this.loading = false
this.tags.unshift(this.newTag)
this.newTag = ''
this.$eventBus.$emit('toastMessageHandler', {
message: this.$t(`search_terms.add_success`),
type: 'info'
});
} catch (e) { //error is undefined
if (e.response.status === 409) {
this.$eventBus.$emit('toastMessageHandler', {
message: this.$t(`search_terms.duplicate_term`),
type: 'error'
});
}
}
}
},
Кажется, как будтомой Перехватчик возвращает обещание, а не объект, поэтому я не могу с ним справиться.В идеале мне не нужно было бы разрешать обещание в компонентах, а просто получать сообщение об ошибке.Каков рекомендуемый способ передачи в мой компонент фактической ошибки, чтобы я мог правильно ее обработать?
Ожидается - передать объект error
в место, где произошел сбой вызова. фактический - error
не определен.
РЕДАКТИРОВАТЬ Мне удалось увидеть ошибку и обработать ее, когда я изменил код в 2 местах, в коде перехватчика: return Promise.reject({error});
А потом в компоненте: catch ({error}) { //error is undefined
if (error.response.status === 409)
Я на самом деле не понимаю, почему это так?возможно, потому что разрушение заставляет обещание решить?