How to properly iterate through array using async functions

I have an array of URLs, which I have to download using JS / Cordova async functions. My current implementation looks like this (simplified):

var urls = [ ...... many many ...... ]
var arrayPointer = 0;

downloadData();

function downloadData() {
    if(arrayPointer >= urls.length) {
        do_something_else();

        return false
    }

    downloadURL(urls[arrayPointer++],successDownloadCallback,failDownloadCallback);

    return false;
}

function failDownloadCallback() {
    logError();
    downloadData();

    return false;
}

function successDownloadCallback(data) {
   saveDataToFile(data,saveSuccessCallback,saveFailCallback);

   return false;
}

function saveFailCallback() {
    logError();
    downloadData();

    return false;
}

function saveSuccessCallback() {
    downloadData();

    return false;
}

Unfortunately, I get “Maximum call stack size exceeded” error sometimes. Is there a better way to do this?

Answer

I had this issue before and managed to resolved it by using async loop (for) here is an example

const downloadAllfiles = async (arr) => {
  for(const x of arr) {
     const file = await downloadURL(x.path);
     await saveFile(file);
  }
  console.log('done with all files');
}