Обработка отказа от обещания в перехватчике - PullRequest
0 голосов
/ 09 июля 2019

Мне трудно разобраться с конкретным случаем ошибки, и мое понимание обещаний неверно.Центральная обработка ошибок в 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) Я на самом деле не понимаю, почему это так?возможно, потому что разрушение заставляет обещание решить?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...