I've encountered a challenge that I haven't been able to solve through online searches.
In my project, I am using a library for selecting items and performing custom modifications through callback functions. However, I need to execute some asynchronous tasks on the selected item, which is causing a race condition as the async tasks are not completed by the time the callback function finishes.
library.onItemSelectionCallback = function (item) {
myService.modifyItem(item).then(
function (modifiedItemProperty) {
item.newProperty = modifiedItemProperty;
});
myService.anotherModifyItem(item).then(
function (modifiedItemProperty) {
item.existingProperty = modifiedItemProperty;
});
}
How can I ensure both async tasks are completed before allowing the callback to finish?
The only solution I could think of involved looping with while and sleeping at intervals until both promises have resolved, but this approach doesn't seem ideal.
I realize that making async requests synchronous may impact user experience, but I'm struggling to find an alternative.
EDIT: I do acknowledge the risk of making the question too specific, but I am attempting to integrate the angular-file-upload module into my project. Specifically, I'm looking to implement a custom imageService for resizing images before uploading them. This service is being mounted in the onBeforeUploadItem callback. The image resizing process may be time-consuming, hence the need for a promise to resolve before upload.