Refactoring asynchronous JavaScript to be IE compatible

Question

I have code where I need to merge a list of images; it works in Chrome but I need to make it compatible with IE. Here is the current code using await/async

await function main(){
    let mergedImage '';
    for(imageToMerge in listOfImages){
        mergedImage = await mergeImages(mergedImage, imageToMerge);
    }
    console.log(mergedImage);
}

await function mergeImages(image1, image2){
    let dataUrl = '';
    await getDataUrl(image1, image2).then(function(val){
        dataUrl = val;
    });
    return dataUrl;
}

function getDataUrl(image1, image2){
    return new Promise(function(resolve, reject){
        //code for loading images/merging onto a canvas
        resolve(canvas.toDataUrl());
    });
}

I tried using all callback functions so it looks like this:

function main(){
    let mergedImage '';
    for(imageToMerge in listOfImages){
        mergeImages(mergedImage, imageToMerge, function(val){
            mergedImage = val;
        });
    }
    console.log(mergedImage);
}

function mergeImages(image1, image2, callback){
    let dataUrl = '';
    await getDataUrl(image1, image2, function(val){
        callback(val);
    });
    return dataUrl;
}

function getDataUrl(image1, image2, callback){
    //code for loading images/merging onto a canvas
    callback(canvas.toDataUrl());
}

However, the problem now is in main(), the console.log(mergedImage) is getting called before all of the iterations in the loop are finished; any advice?

Thanks!

Answer 1

Unfortunately, no version of IE supports async/await, nor do any support native Promise objects (a good reference for features like this is https://caniuse.com/#feat=promises )

You have a few options though. If you are already using Babel, you can use the @babel/plugin-transform-runtime plugin to polyfill it. Check out the corejs property documentation specifically for how best to use it. You can also find a promise library that meets your needs and use that directly. Some examples to look into are Bluebird and Q , but there are certainly others.