how to wait in loop till the series of api calls one inside another is completed in angular (Typescr-CodePudding

everyone!. I am stucked in a situation in typescript. I have a forEach loop in which a Api call method is executed methodOne() in side this method another api call is executed methodTwo() [Sequentially]. Now my requirement is that forEach loop should wait till 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 apicall

CodePudding user response：

Please note that asynchronous functions (both .then() & async/await) won't work inside forEach AND .then() approach also 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);
    }
}

runMethodOneAndMethodTwoInsideLoop();

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

CodePudding user response：

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])`
  });