Vue.js + Element UI: Как часто обрабатывать ошибки HTTP-запросов?

Question

Vue.js + Element UI: Как часто обрабатывать ошибки HTTP-запросов?

1

Я хотел бы централизовать ошибки HTTP-запроса, которые могут возникнуть, когда я вызываю любой метод http-запроса ($http.post, $http.delete и т.д.) С использованием vue-resource.

Я знаю, что могу обрабатывать ошибки для любого отдельного запроса, например:

this.$http.post(restUrl, payload).then(onSuccess, onFailure);

Но, я думаю, если я могу определить и установить onFailure обратного вызова onFailure для любых HTTP-запросов. Я хотел бы обрабатывать любые ошибки HTTP на уровне приложений или что-то подобное.

Моя цель - показать общее тост-сообщение, когда HTTP-запрос завершается с ошибкой.

Любая помощь будет отличной. Благодарю.

Alessandro 16 янв. 2018, в 18:27

Источник

1

Используете ли вы axios или vue-resource (или что-нибудь еще)?
CodeTherapist 16 янв. 2018, в 16:33
0

У меня есть vue-resource в main.js и теперь я понимаю, что это. Спасибо :)
Alessandro 16 янв. 2018, в 16:38

Теги:

javascript

vue.js

vue-resource

element-ui

2 ответа

0

Спасибо C Sharper за очень хорошую стартовую точку. Я написал здесь свое окончательное решение для потомков.

Я проверил response статус перехватчика, и если это не ok, он будет показывать сообщение для конечного потребителя, используя $alert() функцию.

Здесь код:

Vue.http.interceptors.push(function(request, next) {
    next((response) => {
        if (!response.ok) {
            let message = "<summary>Unexpected error</summary><details>Error: " + response.status + " " + response.url + "</details>";
            this.$alert(message, 'Error', {
                "type" : "error",
                "dangerouslyUseHTMLString" : "true"
            });
        }
        return response;
    });
}

Alessandro 17 янв. 2018, в 09:48

Ещё вопросы

Используете ли вы axios или vue-resource (или что-нибудь еще)?
У меня есть vue-resource в main.js и теперь я понимаю, что это. Спасибо :)

CodeTherapist · Accepted Answer · 2018-01-16T15-38-00.000Z

Я думаю, что концепция, которую вы любите использовать, - это interceptors. В vue-resource вы можете определить их для request и response. Пример для перехватчика:

Vue.http.interceptors.push(function(request, next) {

  // modify request ...

  // stop and return response
  next(request.respondWith(body, {
    status: 404,
    statusText: 'Not found'
  }));
});

Спасибо ... это очень хорошая отправная точка.
Если это решит или ответит на ваш вопрос, я буду признателен, если вы отметите его как правильный.