Как последовательно выполнять запросы внутри map?

Question

[inflexible]

Как правильно сделать асинхронность внутри map?

Есть приблизительно вот такая штука, и нужно чтобы все запросы fetch были асинхронными и строго друг за другом, как это реализовать?! пробовал обернуть в Promise.all(), но это ничего не изменило((

myArray.map( (item, index) => {
            fetch(`some url`)
                .then( response => response.json())
                .then( response => {...})
                .catch( error => {
                    console.log(error)
                })
        })

Comments

[kunjut19]

setTimeout, равное 0?

Answer 1

[0xD34F]

Никак.

Делайте async функцию, где будет цикл, в теле которого await fetch:

async function xxx(arr) {
  const result = [];

  for (const item of arr) {
    result.push(await fetch(...));
  }

  return result;
}

Answer 2

[RAX7]

Либо использовать async/await

const myArray = ["1", "2", "3", "4"];
(async function (array) {
  for (item of array) {
    await fetch(`https://jsonplaceholder.typicode.com/posts/${item}`)
      .then((response) => response.json())
      .then((response) => console.log(response))
      .catch((error) => console.error(error));
  }
})(myArray);

Либо reduce

const myArray = ["1", "2", "3", "4"];
myArray.reduce((p, item) => {
  return p
    .then(() => fetch(`https://jsonplaceholder.typicode.com/posts/${item}`))
    .then((response) => response.json())
    .then((response) => console.log(response))
    .catch((error) => console.error(error));
}, Promise.resolve());