返回承诺的Vuex动作永远不会解决或拒绝 [英] Vuex action which returns a promise never resolves or rejects

问题描述

我正在尝试使用Vuex在我的VueJS应用程序中构建我的API服务.我正在重构某些东西以集中处理错误，清理等问题.我遇到的问题是通过函数调用正确地链接了Promises.

I'm trying to build up my API service in my VueJS application by using Vuex. I'm in the process of refactoring some stuff to centralize error handling, clean-up, etc. The issue I'm running into is properly chaining Promises through my function calls.

在根级别，我有一个BaseService类，该类仅使用AXIOS(不是完整类)发出API请求:

At the root level, I have a BaseService class, which simply make API requests using AXIOS (not full class):

export abstract class BaseService {
  protected readonly API: AxiosInstance; // Full init left out

  protected deleteItem(url: string): Promise<any> {
    return new Promise((resolve, reject) => {
      this.API.delete(url)
        .then((response: any) => {
          resolve(response);
        })
        .catch((error: any) => {
          this.handleError(error); // Local function that logs error
          reject(error);
        });
    });
  }
}

然后我有一层，通过组合请求URL和处理数据，可以在其上管理API的不同功能:

Then I have one layer above which managers different features of the API by assembling the request URL and handling the data:

class CompanyService extends BaseService {
  private constructor() {
    super();
  }

  public delete(id: number): Promise<any> {
    return this.deleteItem(`${this.baseUrl}/api/companies/${id}`);
  }
}

然后在我的Vuex操作中，我调用companyService删除函数:

Then in my Vuex action I'm calling the companyService delete function:

const action = {
  COMPANY_DELETE(context: any, id: number) {
    return new Promise((resolve, reject) => {
      companyService // Instance of CompanyService
        .delete(id)
        .then((response: any) => {
          console.log(response); // This logs successfully
          resolve(response);
        })
        .catch((error: any) => {
          console.log(error); // This logs successfully
          reject(error);
        });
    });
  }
};

如我的评论所示，两个控制台日志已成功完成.当我到达调用此操作的组件时，就会出现此问题:

The two console logs complete successfully as indicated by my comments. This issue comes in when I get to the component which invokes this action:

this.$store
  .dispatch("company/COMPANY_DELETE", company.id) // Namespaced
  .then((response: any) => {
    console.log(response); // Never gets called
  })
  .catch((error: any) => {
    console.log(error); // Never gets called
  });

从不调用这两个控制台日志.我在这里做什么错了?

Those two console logs are never called. What am I doing wrong here?

推荐答案

最终的工作是删除了虚空雷说.但是，在我的特定用例中，我还需要支持错误传播.因此，以下操作包含我需要进行的修复.

What ended up working was to remove the extra Promise like Void Ray said. However, in my particular use-case I also need to support error propagation. So the below action contains the fixes that I needed to make.

const action = {
  COMPANY_DELETE(context: any, id: number) {
    return companyService // Instance of CompanyService
      .delete(id)
      .then((response: any) => {
        console.log(response);
      })
      .catch((error: any) => {
        console.log(error);
        throw error; // Needed to continue propagating the error
      });
  },
};

这篇关于返回承诺的Vuex动作永远不会解决或拒绝的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！