I am currently enhancing my API service within my VueJS application by utilizing Vuex. As part of this process, I am restructuring certain aspects to streamline error handling and cleanup procedures. However, I am encountering difficulty in correctly chaining Promises across my function calls.
At the fundamental level, there is a BaseService class responsible for making API requests using AXIOS (only partial code shown):
export abstract class BaseService {
protected readonly API: AxiosInstance; // Initialization details omitted
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); // Error logging function
reject(error);
});
});
}
}
Above this, there exists a layer that manages various features of the API by constructing request URLs and handling data:
class CompanyService extends BaseService {
private constructor() {
super();
}
public delete(id: number): Promise<any> {
return this.deleteItem(`${this.baseUrl}/api/companies/${id}`);
}
}
Furthermore, in my Vuex action, I invoke 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); // Logs successfully
resolve(response);
})
.catch((error: any) => {
console.log(error); // Logs successfully
reject(error);
});
});
}
};
While the two console logs indicate success, I encounter an issue when reaching the component that triggers this action:
this.$store
.dispatch("company/COMPANY_DELETE", company.id) // Namespaced
.then((response: any) => {
console.log(response); // Does not execute
})
.catch((error: any) => {
console.log(error); // Does not execute
});
Unexpectedly, these specific console logs remain uncalled. What could be causing this problem?