Question

处理错误的特定情况时遇到麻烦，似乎我对诺言的理解是有缺陷的。在axios拦截器中进行中央错误处理，可以处理我对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);
  });

这在大多数情况下效果很好，但在一种情况下，我会进行此api调用：

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'
              });
            }
          }
        }
      },

似乎我的拦截器返回了一个承诺而不是一个对象，因此我无法处理它。理想情况下，我不需要解析组件中的promise，而是只收到错误消息。将实际错误传递给组件的推荐方法是什么？

预期-将error对象传递到调用失败的位置。实际-error未定义。

编辑，当我在拦截器代码的2个地方更改代码时，我能够看到错误并进行处理： return Promise.reject({error}); 然后在组件中： catch ({error}) { //error is undefined if (error.response.status === 409) 我实际上不明白为什么会这样？可能是因为破坏迫使承诺解决了？

在axios拦截器中处理Promise拒绝

0 个答案: