Vuex动作返回一个承诺从未解决或拒绝(Vuex action which returns a pr

我试图建立我的API服务在我VueJS使用Vuex应用。我在重构了一些东西，以集中的错误处理，清理等我快到的问题是正确的，通过我的函数调用链接承诺的过程。

在根目录中，我有一个BaseService类，它只是让使用AXIOS（不是满级）API请求：

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的不同的功能：

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

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

然后在我的Vuex行动我打电话companyService删除功能：

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

通过我的意见指示两个控制台日志成功完成。这个问题进来时，我得到它调用这个动作的组件：

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

这两个控制台日志不会被调用。我在做什么错在这里？

Answer 1:

小例子来证明与爱可信的行动，而不额外承诺包...

 const store = new Vuex.Store({ state: { followers: 0 }, mutations: { updateFollowers(state, followers){ state.followers = followers; } }, actions: { getFollowers({commit}) { return axios.get('https://api.github.com/users/octocat').then( (response) => { commit("updateFollowers", response.data.followers); return "success!!!"; }); } } }) Vue.component('followers', { template: '<div>Followers: {{ computedFollowers }}</div>', created () { this.$store.dispatch('getFollowers').then( (result) => { console.log(result); }); }, computed: { computedFollowers() { return store.state.followers; } } }); const app = new Vue({ store, el: '#app' })

 <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/vuex"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <div id="app"> <followers></followers> </div>

Answer 2:

什么结束了工作是去除多余的承诺像虚空雷说。然而，在我的具体使用情况我还需要支持错误传播。所以，下面的动作包含了我需要做出修正。

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 action which returns a promise never resolves or rejects