Blockiert die Verwendung von Warten in einer Schleife in JavaScript die Schleife?

Nehmen Sie die folgende Schleife:

for(var i=0; i<100; ++i){
    let result = await some_slow_async_function();
    do_something_with_result();
}

1. Hat awaitblockieren die Schleife? Oder wird das iwährend des awaitIng weiter erhöht ?

2. Ist die Reihenfolge der do_something_with_result()garantierten Reihenfolge in Bezug auf i? Oder hängt es davon ab, wie schnell die awaited-Funktion für jede ist i?

1. Hat awaitblockieren die Schleife? Oder wird das iwährend des awaitIng weiter erhöht ?

"Block" ist nicht das richtige Wort, aber ja, ich werde nicht weiter erhöht, während ich warte. Stattdessen springt die Ausführung zurück zu dem Ort, an dem die asyncFunktion aufgerufen wurde, und gibt ein Versprechen als Rückgabewert aus. Der Rest des nach dem Funktionsaufruf folgenden Codes wird fortgesetzt, bis der Codestapel geleert wurde. Wenn das Warten beendet ist, wird der Status der Funktion wiederhergestellt und die Ausführung innerhalb dieser Funktion fortgesetzt. Immer wenn diese Funktion zurückkehrt (abgeschlossen wird), wird das entsprechende Versprechen - das zuvor zurückgegeben wurde - aufgelöst.

2. Ist die Reihenfolge der do_something_with_result()garantierten Reihenfolge in Bezug auf i? Oder hängt es davon ab, wie schnell die awaited-Funktion für jede ist i?

Die Bestellung ist garantiert. Der Code, der auf folgt, awaitwird garantiert erst ausgeführt, nachdem der Aufrufstapel geleert wurde, dh zumindest bei oder nach der Ausführung der nächsten Mikrotask.

Sehen Sie, wie die Ausgabe in diesem Snippet ist. Beachten Sie insbesondere, wo "nach dem Aufruf von test" steht:

async function test() {
    for (let i = 0; i < 2; i++) {
        console.log('Before await for ', i);
        let result = await Promise.resolve(i);
        console.log('After await. Value is ', result);
    }
}

test().then(_ => console.log('After test() resolved'));

console.log('After calling test');

Wie @realbart sagt, blockiert es die Schleife, wodurch die Aufrufe sequentiell werden.

Wenn Sie eine Menge erwartbarer Vorgänge auslösen und dann alle zusammen ausführen möchten, können Sie Folgendes tun:

const promisesToAwait = [];
for (let i = 0; i < 100; i++) {
  promisesToAwait.push(fetchDataForId(i));
}
const responses = await Promise.all(promisesToAwait);

Sie können async / await in einer "FOR LOOP" wie folgt testen:

(async  () => {
        for (let i = 0; i < 100; i++) {
                await delay();
                console.log(i);
        }
})();

function delay() {
        return new Promise((resolve, reject) => {
                setTimeout(resolve, 100);
        });
}

Anzeige 1. Ja. Nein.

Anzeige 2. Ja. Nein.

Beweis:

async function start() 
{
  console.log('Start');

  for (var i = 0; i < 10; ++i) {
    let result = await some_slow_async_function(i);
    do_something_with_result(i);
  }
  
  console.log('Finish');
}

function some_slow_async_function(n) {
  return new Promise(res => setTimeout(()=>{
    console.log(`Job done: ${(2000/(1+n))|0} ms`);
    res(true);
  },2000/(1+n)));
}

function do_something_with_result(n) {
  console.log(`Something ${n}`);
}

start();

Keine Ereignisschleife ist nicht blockiert, siehe Beispiel unten

function sayHelloAfterSomeTime (ms) {
  return new Promise((resolve, reject) => {
    if (typeof ms !== 'number') return reject('ms must be a number')
    setTimeout(() => { 
      console.log('Hello after '+ ms / 1000 + ' second(s)')
      resolve()  
    }, ms)
  })
}

async function awaitGo (ms) {
   await sayHelloAfterSomeTime(ms).catch(e => console.log(e))
   console.log('after awaiting for saying Hello, i can do another things  ...')
}

function notAwaitGo (ms) {
	sayHelloAfterSomeTime(ms).catch(e => console.log(e))
    console.log('i dont wait for saying Hello ...')
}

awaitGo(1000)
notAwaitGo(1000)
console.log('coucou i am event loop and i am not blocked ...')

Hier ist meine Testlösung zu dieser interessanten Frage:

import crypto from "crypto";

function diyCrypto() {
    return new Promise((resolve, reject) => {
        crypto.pbkdf2('secret', 'salt', 2000000, 64, 'sha512', (err, res) => {
            if (err) {
                reject(err)
                return 
            }
            resolve(res.toString("base64"))
        })
    })
}

setTimeout(async () => {
    console.log("before await...")
    const a = await diyCrypto();
    console.log("after await...", a)
}, 0);

setInterval(() => {
    console.log("test....")
}, 200);

Innerhalb des Rückrufs von setTimeout awaitblockiert die Ausführung. Aber das setIntervalläuft weiter, so dass die Ereignisschleife wie gewohnt läuft.

asyncFunktionen geben ein Versprechen zurück, bei dem es sich um ein Objekt handelt, das schließlich in einen Wert "aufgelöst" oder mit einem Fehler "abgelehnt" wird. Das awaitSchlüsselwort bedeutet warten, bis dieser Wert (oder Fehler) abgeschlossen ist.

Aus Sicht der laufenden Funktion wird das Warten auf das Ergebnis der langsamen asynchronen Funktion blockiert . Die Javascript-Engine hingegen erkennt, dass diese Funktion blockiert ist und auf das Ergebnis wartet. Daher überprüft sie die Ereignisschleife (z. B. neue Mausklicks oder Verbindungsanfragen usw.), um festzustellen, ob andere Dinge vorhanden sind Es kann so lange bearbeitet werden, bis die Ergebnisse zurückgegeben werden.

Beachten Sie jedoch, dass die Javascript-Engine nicht viele Ressourcen hat, um andere Aufgaben zu erledigen, wenn die langsame Async-Funktion langsam ist, weil sie viele Dinge in Ihrem Javascript-Code berechnet (und wenn Sie andere Dinge tun, würde dies wahrscheinlich die langsame Async-Funktion bewirken noch langsamer). Der Vorteil von Async-Funktionen liegt in E / A-intensiven Vorgängen wie dem Abfragen einer Datenbank oder dem Übertragen einer großen Datei, bei der die Javascript-Engine wirklich auf etwas anderes wartet (z. B. Datenbank, Dateisystem usw.).

Die folgenden zwei Codebits sind funktional äquivalent:

let result = await some_slow_async_function();

und

let promise = some_slow_async_function(); // start the slow async function
// you could do other stuff here while the slow async function is running
let result = await promise; // wait for the final value from the slow async function

Im zweiten Beispiel oben wird die langsame asynchrone Funktion ohne das awaitSchlüsselwort aufgerufen , sodass die Ausführung der Funktion gestartet und ein Versprechen zurückgegeben wird. Dann können Sie andere Dinge tun (wenn Sie andere Dinge zu tun haben). Dann wird das awaitSchlüsselwort verwendet, um zu blockieren, bis das Versprechen tatsächlich "aufgelöst" wird. Aus der Sicht der forSchleife läuft sie also synchron.

Damit:

1. Ja, das awaitSchlüsselwort hat den Effekt, dass die laufende Funktion blockiert wird , bis die asynchrone Funktion entweder mit einem Wert "aufgelöst" oder mit einem Fehler "zurückgewiesen" wird, aber die Javascript-Engine nicht blockiert, die andere Dinge tun kann, wenn sie andere hat Dinge zu tun, während Sie warten

2. Ja, die Ausführung der Schleife erfolgt sequentiell

Unter http://javascript.info/async gibt es ein großartiges Tutorial dazu .

Blockiert das Warten die Schleife? Oder wird das iwährend des Wartens weiter erhöht?

Nein, warten wird die Schleife nicht blockieren. Ja, wird iwährend der Schleife weiter erhöht.

Ist die Reihenfolge von do_something_with_result () in Bezug auf garantiert sequentiell i? Oder hängt es davon ab, wie schnell die erwartete Funktion für jede ist i?

Die Reihenfolge do_something_with_result()wird nacheinander garantiert, jedoch nicht in Bezug aufi . Dies hängt davon ab, wie schnell die erwartete Funktion ausgeführt wird.

Alle Aufrufe an some_slow_async_function()werden gestapelt, dh wenn dies a do_something_with_result()war , wird angezeigt, consolewie oft die Schleife ausgeführt wird. Danach werden nacheinander alle erwarteten Aufrufe ausgeführt.

Zum besseren Verständnis können Sie das folgende Code-Snippet ausführen:

async function someFunction(){
for (let i=0;i<5;i++){
 await callAPI();
 console.log('After', i, 'th API call');
}
console.log("All API got executed");
}

function callAPI(){
setTimeout(()=>{
console.log("I was called at: "+new Date().getTime())}, 1000);
}

someFunction();

Man kann deutlich sehen, wie die Zeile console.log('After', i, 'th API call');zuerst für die gesamte Strecke der for-Schleife gedruckt wird und dann am Ende, wenn der gesamte Code ausgeführt wird, Ergebnisse erhalten callAPI().

Wenn also Leitungen nach dem Warten vom Ergebnis der Warte-Anrufe abhängen, funktionieren sie nicht wie erwartet.

Zusammenfassend lässt sich sagen, dass awaitin for-loopkeine erfolgreiche Operation für das Ergebnis von Warteanrufen gewährleistet ist , deren Abschluss einige Zeit in Anspruch nehmen kann.

Wenn man im Knoten eine neo-asyncBibliothek mit verwendet waterfall, kann man dies erreichen.