How to wait in loop till the series of API calls one inside another is completed in Javascript

Question

I am stuck in a situation in typescript.

I have a forEach loop in which an API call method is executed methodOne(); inside this method, another API call to methodTwo() is executed [sequentially].

Now my requirement is that the forEach loop should wait until both the API calls are executed and then after this, forEach should go for its next iteration.

Code flow looks like this:

list.forEach(item => {
    methodOne(item);
})

methodOne(){
    methodTwo();
}

methodTwo(){
    //some code..
}

Note: I am not using any async, await, Promise or Observables in the API call

Answer 1

Please note that asynchronous functions (both .then() & async/await) won't work inside forEach ALSO .then() approach won't work in neither forEach or for loops.

To run an asynchronous function inside a loop you need to use the async/await approach inside either a for loop or a Recursion Function.

In the following example, we're gonna use the async/await approach inside a for loop.

const list = ['firstItem', 'secondeItem', 'lastItem'];

// First method
// use `i` parameter to check in which index the method was called
function methodOne(i: string): Promise<void> {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log(`Make the first API call at index ${i}`);
            resolve();
        }, 1000);
    });
}


// Second method
// use `i` parameter to check in which index the method was called
function methodTwo(i: string): Promise<void> {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log(`Make the second API call at index ${i}`);
            resolve();
        }, 1000);
    });
}

// run both methods sequentially inside a `for` loop
async function runMethodOneAndMethodTwoInsideLoop (): Promise<void> {
    for (let i in list) {
        await methodOne(i);
        await methodTwo(i);
    }
}

runMethodOneAndMethodTwoInsideLoop();

To call methodTwo inside methodOne (which I don't recommend) you can use the following example.

const list = ['firstItem', 'secondeItem', 'lastItem'];

// First method
// use `i` parameter to check in which index the method was called
function methodOne(i: string): Promise<void> {
    return new Promise((resolve) => {
        setTimeout(async () => {
            console.log(`Make the first API call at index ${i}`);
            await methodTwo(i);
            resolve();
        }, 1000);
    });
}


// Second method
// use `i` parameter to check in which index the method was called
function methodTwo(i: string): Promise<void> {
    return new Promise((resolve) => {
        setTimeout(() => {
            console.log(`Make the second API call at index ${i}`);
            resolve();
        }, 1000);
    });
}

// run only `methodOne` inside a `for` loop since `methodTwo` will be called inside `methodOne`
async function runMethodOneInsideLoop(): Promise<void> {
    for (let i in list) {
        await methodOne(i);
    }
}

runMethodOneInsideLoop();

To learn more about asynchronous functions and how to use them inside loops check out this gist I created.

Answer 2

A! Like that! This one?

Just feed a bunch of async callbacks to promiseChain, and it will execute them sequentially.

function methodTwo() {
  // some code..
  return Promise.resolve(); // <= Or any async code
}

function methodOne(item: number) {
  return methodTwo().then(result => {
    // some code..
    return { item, result };
  });
}

async function promiseChain<T>(callbacks: (() => Promise<T>)[]) {
  var output: T[] = [];
  for (const callback of callbacks) {
    const result = await callback();
    output.push(result);
  }
  return output;
}

const list = [1, 2, 3, 4];
promiseChain(list.map(item => () => methodOne(item)))
  .then(responses => {
    // DO STUFF HERE
    const first_response = responses[0]; // Result of `methodOne(list[0])`
    const second_response = responses[1]; // Result of `methodOne(list[1])`
  });