Verwenden Sie async await mit Array.map

Gegeben den folgenden Code:

var arr = [1,2,3,4,5];

var results: number[] = await arr.map(async (item): Promise<number> => {
        await callAsynchronousOperation(item);
        return item + 1;
    });

Dies führt zu folgendem Fehler:

TS2322: Der Typ 'Versprechen <Nummer> []' kann nicht dem Typ 'Nummer []' zugewiesen werden. Der Typ 'Versprechen <Nummer> kann nicht dem Typ' Nummer 'zugewiesen werden.

Wie kann ich es reparieren? Wie kann ich machen async awaitund Array.mapzusammen arbeiten?

Das Problem hierbei ist, dass Sie awaiteher eine Reihe von Versprechungen als ein Versprechen versuchen . Dies macht nicht das, was Sie erwarten.

Wenn das übergebene Objekt awaitkein Versprechen ist, wird awaitder Wert sofort unverändert zurückgegeben, anstatt zu versuchen, ihn aufzulösen. Da Sie awaithier also anstelle eines Versprechens ein Array (von Promise-Objekten) übergeben haben, ist der von await zurückgegebene Wert einfach das Array vom Typ Promise<number>[].

Was Sie hier tun müssen, ist Promise.alldas von zurückgegebene Array aufzurufen map, um es in ein einzelnes Versprechen umzuwandeln, bevor awaitSie es ausführen .

Gemäß den MDN-Dokumenten fürPromise.all :

Die Promise.all(iterable)Methode gibt ein Versprechen zurück, das aufgelöst wird, wenn alle Versprechen im iterierbaren Argument aufgelöst wurden, oder lehnt es mit dem Grund des ersten übergebenen Versprechens ab, das abgelehnt wird.

Also in deinem Fall:

var arr = [1, 2, 3, 4, 5];

var results: number[] = await Promise.all(arr.map(async (item): Promise<number> => {
    await callAsynchronousOperation(item);
    return item + 1;
}));

Dadurch wird der spezifische Fehler behoben, auf den Sie hier stoßen.

Es gibt eine andere Lösung dafür, wenn Sie keine nativen Versprechen verwenden, sondern Bluebird.

Sie können auch versuchen, Promise.map () zu verwenden , indem Sie array.map und Promise.all mischen

In Ihrem Fall:

  var arr = [1,2,3,4,5];

  var results: number[] = await Promise.map(arr, async (item): Promise<number> => {
    await callAsynchronousOperation(item);
    return item + 1;
  });

Wenn Sie einem Array von Versprechungen zuordnen, können Sie sie alle in ein Array von Zahlen auflösen. Siehe Promise.all .

Ich würde empfehlen, Promise.all wie oben erwähnt zu verwenden, aber wenn Sie diesen Ansatz wirklich vermeiden möchten, können Sie eine for- oder eine andere Schleife ausführen:

const arr = [1,2,3,4,5];
let resultingArr = [];
for (let i in arr){
  await callAsynchronousOperation(i);
  resultingArr.push(i + 1)
}

Lösung unten, um alle Elemente eines Arrays asynchron zu verarbeiten UND die Reihenfolge beizubehalten:

const arr = [1, 2, 3, 4, 5, 6, 7, 8];
const randomDelay = () => new Promise(resolve => setTimeout(resolve, Math.random() * 1000));

const calc = async n => {
  await randomDelay();
  return n * 2;
};

const asyncFunc = async () => {
  const unresolvedPromises = arr.map(n => calc(n));
  const results = await Promise.all(unresolvedPromises);
};

asyncFunc();

Auch Codepen .

Beachten Sie, dass wir nur auf Promise.all "warten". Wir rufen calc an, ohne mehrmals zu warten, und sammeln sofort eine Reihe ungelöster Versprechen. Dann wartet Promise.all auf die Auflösung aller und gibt ein Array mit den aufgelösten Werten in der angegebenen Reihenfolge zurück.