약속을 반환하는 Vuex 작업이 해결되거나 거부되지 않음

약속을 반환하는 Vuex 작업이 해결되거나 거부되지 않음

VueJS 어플리케이션에서 Vuex를 사용하여 API 서비스를 구축하려고 합니다.에러 처리, 정리 등을 일원화하기 위해 리팩터링 작업을 하고 있습니다.제가 직면한 문제는 함수 호출을 통해 Promise를 적절하게 연결하는 것입니다.

루트 레벨에는 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 delete 함수를 호출합니다.

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

2개의 콘솔로그가 제 코멘트에 나타나 있듯이 정상적으로 완료되었습니다.이 문제는 이 액션을 실행하는 컴포넌트에 도달했을 때 발생합니다.

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

이 2개의 콘솔로그는 호출되지 않습니다.내가 여기서 뭘 잘못하고 있는 거지?

추가 약속 랩 없이 액티언으로 액션을 시연하는 작은 예...

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>

결국 Void Ray가 말한 것처럼 여분의 Promise를 제거하는 것이 효과가 있었다.다만, 특정의 유스케이스에서는, 에러 전파도 서포트할 필요가 있습니다.그래서 아래 액션은 제가 해야 할 수정을 포함하고 있습니다.

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

언급URL : https://stackoverflow.com/questions/50989588/vuex-action-which-returns-a-promise-never-resolves-or-rejects