asyncronous callbacks inside for loop

Question

var a = ['url1', 'url2', 'url3'];
var op = [];

cb = (callback) => {
  for (var i = 0; i < a.length; i++) {
    gtts.savetos3(`${a[i]}.mp3`, a[i], 'ta', function(url) {
      console.log(url['Location']);
      op.push(url['Location']);
    });
  }
  callback()
}

cb(() => {
   console.log(op);
})

In the above code the gtts.savetos3 is an asynchronous function.It takes significance amount of time to complete the execution for every element in array.Due to asynchronous feature I cannot print the complete array of url in op array as it prints an empty array.

gtts.savetos3 function calls the given callback with correct url so that i can print the output using console.log but when comes to looping i got messed up.

My question is

How to make the callback function called only after the execution of the all array elements get processed by the gtts.savetos3 function.
can we achieve the solution for above problem without Promise.all or without Promise with the help of using only callbacks.

Thanks in Advance ...!

Why don't you want to use `Promise.all`? It *is* by far the most elegant solution https://stackoverflow.com/questions/31426740/how-to-return-many-promises-in-a-loop-and-wait-for-them-all-to-do-other-stuff There are workarounds, sure, but I wouldn't want to recommend them — CertainPerformance, Jan 14 '20 at 07:32
@CertainPerformance could you provide the simple example which has the similar pattern using promises.All ? — chellathurai, Jan 14 '20 at 08:04
See https://stackoverflow.com/questions/22519784/how-do-i-convert-an-existing-callback-api-to-promises and https://stackoverflow.com/questions/31426740/how-to-return-many-promises-in-a-loop-and-wait-for-them-all-to-do-other-stuff — CertainPerformance, Jan 14 '20 at 08:05

AZ_ · Answer 1 · 2020-01-14T08:22:25.667

You can keep a counter and increase it inside the methods's callback, call your done callback only when the counter reaches the length of the array.

cb = (done) => {
    let counter = 0;
    for (let i = 0; i < a.length; i++) {
        gtts.savetos3(`${a[i]}.mp3`, a[i], 'ta', function (url) {
            console.log(url['Location']);
            op.push(url['Location']);
            ++counter;
            if (counter == a.length) {
              done();
            }
        });
    }
}

cb(() => {
    console.log(op);
})

This is just a way to solve the problem without Promises or any third party module but not the elegant or correct way.

If you want to stick to the callback and are ok to use third-party module have a look on Async waterfall method.

If you are using aws-sdk's s3 put object, then sdk already provides a promisified methods as well, you can simply append your method with .promise to get the same.

To solve the problem with promises just change your wrapper into an async function.

async savetos3(...parametres) {
    //Some implementation
    let res = await S3.putObject(....params).promise();
    //Some implementation
}

cb = Promise.all(a.map(name => savetos3(`${name}.mp3`, name , 'ta')));

cb.then(() => {
    console.log(op);
})

I think the If condition should in the callback to the savetos3 function call but not outside of for loop. — Pawan Kumar, Jan 14 '20 at 07:43
Due to asynchronous function call the **op** array is not update properly. — chellathurai, Jan 14 '20 at 07:56

TopW3 · Answer 2 · 2020-01-14T08:53:25.150

0

Here is my solution.

const a = ['url1', 'url2', 'url3'];
const op = [];

const saveToS3 = name => new Promise((resolve, reject) => {
    gtts.savetos3(`${name}.mp3`, name, 'ta', function (url) {
        console.log(url['Location']);
        resolve(url)
    });
})

Promise.all(a.map(item => saveToS3(item))).then(() => {
    console.log(op)
})

edited Jan 14 '20 at 08:53

answered Jan 14 '20 at 08:10

TopW3

1,477
1
8
14

Working like charm . Could you explain why the ```callback()``` inside the **async** function is called only after all **await** syntax . – chellathurai Jan 14 '20 at 08:29
That is just async/await. In async function, await blocks the function until the awaited promise is resolved or rejected. – TopW3 Jan 14 '20 at 08:30
@AZ_ please provide the pure promisified snippet. – chellathurai Jan 14 '20 at 08:31
Please check again. Of course, we can use async function instead of Promise. – TopW3 Jan 14 '20 at 08:32
@TopW3 will it blocks the complete code execution below the await condition? or only just particular condition? – chellathurai Jan 14 '20 at 08:52
@ThuraiSelvaraj It blocks the current function(async) – TopW3 Jan 14 '20 at 08:54
@TopW3 Is there any other method which we can obtain the above solution? If exists kindly list it . – chellathurai Jan 14 '20 at 09:16

asyncronous callbacks inside for loop

2 Answers2