Asynchrone Funktion – warten, nicht auf Versprechen warten

Ich versuche, Async-Await zu lernen. In diesem Code –

const myFun = () => {
    let state = false;

    setTimeout(() => {state = true}, 2000);

    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if(state) {
                resolve('State is true');
            } else {
                reject('State is false');
            }
        }, 3000);
    });
}

const getResult = async () => {
    return await myFun();
}

console.log(getResult());

Warum erhalte ich die Ausgabe als –

Promise { <pending> }

Anstelle eines Werts? Sollte das nicht der Fall sein? getResult() Funktion warten auf myFun() Funktion löst ihren Versprechenswert auf?

Wenn Sie async/await verwenden, müssen alle Ihre Anrufe Promises oder async/await verwenden. Sie können nicht einfach auf magische Weise ein asynchrones Ergebnis aus einem Synchronisierungsaufruf erhalten.

Ihr letzter Anruf muss sein:

getResult().then(response => console.log(response));

Oder so etwas wie:

(async () => console.log(await getResult()))()

Was Sie verstehen müssen, ist, dass async/await Ihren Code nicht synchron laufen lässt, sondern Sie ihn so schreiben können, als wäre er:

Kurz gesagt: Die Funktion mit async davor wird im wahrsten Sinne des Wortes asynchron ausgeführt, daher das Schlüsselwort „async“. Und das Schlüsselwort „await“ sorgt dafür, dass die Zeile, die es in dieser asynchronen Funktion verwendet, während der Ausführung auf ein Versprechen wartet. Obwohl die Zeile wartet, wird die gesamte Funktion dennoch asynchron ausgeführt, es sei denn, der Aufrufer dieser Funktion „wartet“ ebenfalls …

Ausführlicher erklärt: Wenn Sie „async“ vor eine Funktion setzen, sorgt diese tatsächlich dafür, dass sie ein Versprechen zurückgibt, mit allem, was diese Funktion darin zurückgibt. Die Funktion wird asynchron ausgeführt und wenn die Return-Anweisung ausgeführt wird, löst das Versprechen den zurückgegebenen Wert auf.

Das bedeutet in Ihrem Code:

const getResult = async () => {
    return await myFun();
}

Die Funktion „getResult()“ gibt ein Promise zurück, das aufgelöst wird, sobald die Ausführung abgeschlossen ist. Daher werden die Zeilen innerhalb der Funktion getResult() asynchron ausgeführt, es sei denn, Sie weisen die Funktion, die getResult() aufruft, an, ebenfalls darauf zu „warten“. Innerhalb der getResult()-Funktion können Sie sagen, dass sie auf das Ergebnis warten muss, was dazu führt, dass die Ausführung von getResult() darauf wartet, dass das Versprechen aufgelöst wird, aber der Aufrufer von getResult() wartet nicht, es sei denn, Sie sagen dem Aufrufer auch, er solle warten ‘.

Eine Lösung wäre also, entweder Folgendes aufzurufen:

getResult().then(result=>{console.log(result)})

Oder wenn Sie es in einer anderen Funktion verwenden, können Sie einfach erneut „await“ verwenden

async function callingFunction(){
    console.log(await(getResult());
}

Das ist mein routinemäßiger Umgang erwarten Und asynchron Verwendung einer Versprechen mit beschließen Und ablehnen Mechanismus

    // step 1 create a promise inside a function
    function longwork()
    {
        p =  new Promise(function (resolve, reject) {
            result = 1111111111111 // long work here ; 

            if(result == "good"){
                resolve(result);
            }
            else
            {
                reject("error ...etc")
            } 
        })

        return p
    }

    // step 2 call that function inside an async function (I call it main)and use await before it
    async function main()
    {
         final_result = await longwork();
         //..

    }  

    //step 3 call the async function that calls the long work function
    main().catch((error)=>{console.log(error);})

Ich hoffe, das erspart jemandem wertvolle Stunden

Was in dieser Diskussion nicht erwähnt wurde, sind die Auswirkungen des Verhaltens auf den Anwendungsfall. Meiner Meinung nach besteht der Schlüssel darin, zu überlegen, was Sie mit der Ausgabe der obersten Ebene, einer wirklich asynchronen Funktion, vorhaben und wo Sie dies tun möchten.

Wenn Sie vorhaben, die Ausgabe sofort zu konsumieren, d. h. innerhalb der „async“-Funktion, die auf die Rückkehr der asynchronen Funktion der obersten Ebene wartet, und was Sie mit der Ausgabe tun, keine Auswirkungen auf andere Funktionen tiefer im Aufrufstapel hat, dann ist dies der Fall Es spielt keine Rolle, dass die tieferen Funktionen weitergegangen sind. Wenn die Ausgabe jedoch tiefer im Aufrufstapel benötigt wird, müssen Sie „asynchrone“ Funktionen verwenden, die Warteaufrufe bis zu diesem Punkt im Stapel ausführen. Sobald Sie im Aufrufstapel einen Punkt erreichen, an dem sich die Funktion nicht mehr um die asynchrone Ausgabe kümmert, können Sie die Verwendung asynchroner Funktionen beenden.

Im folgenden Code verwendet Funktion B beispielsweise die von Funktion A zurückgegebenen Daten, wird also als „asynchron“ deklariert und wartet auf A(). Funktion C() ruft B() auf, erhält ein Promise zurück, kann aber direkt weitermachen, bevor dieses Promise aufgelöst wird, da sie weder an den Dingen von A() noch daran interessiert ist, was damit gemacht wird. C muss also nicht als asynchron deklariert werden und auch nicht auf B() warten.

function A() {
    return new Promise((resolve, reject) => {
        //do something slow
        resolve (astuff)
    }
}
async function B() {
    var bstuff = await A();
    dosomethingwith(bstuff);
    return;
}
function C() {
    B();
    dontwaitmoveon();
    ...
    return;
}

In diesem nächsten Beispiel verwendet C() die Inhalte von A() und muss daher warten. C() muss als „async“ deklariert werden und auf B() warten. D() kümmert sich jedoch nicht um die Dinge von A() oder darum, was damit gemacht wird, und macht daher weiter, sobald C() sein Versprechen zurückgibt.

function A() {
    return new Promise((resolve, reject) => {
        //do something slow
        resolve (astuff)
    }
}

async function B() {
    var bstuff = await A();
    dosomething();
    return bstuff;
}

async function C() {
    var cstuff = await B();
    dosomethingwith(cstuff);
    ...
    return;
}

function D() {
    C();
    dontwaitmoveon();
    ...
    return;
}

Seitdem ich das herausgefunden habe, habe ich versucht, meinen Code so zu gestalten, dass der von der asynchronen Funktion zurückgegebene Inhalt so nah wie möglich an der Quelle verbraucht wird.

Obwohl dein „getResult„Funktion ist asynchron und Sie haben zu Recht einen Warteanruf von myFun getätigt, schauen Sie sich die Stelle an, an der Sie anrufen getResult Funktion, es ist außerhalb jeder asynchron funktioniert so, dass es synchron läuft.

Also seitdem getResult Aus synchroner Sicht aufgerufen: Sobald es aufgerufen wird, ruft Javascript synchron jedes Ergebnis ab, das gerade verfügbar ist, was ein Versprechen ist.

So kehrt zurück von einer asynchronen Funktion können nicht zum Warten gezwungen werden (sehr wichtig), da sie synchron an den Ursprungsort des Aufrufs gebunden sind.

Um zu bekommen, was Sie wollen, können Sie Folgendes ausführen:

async function getResult() {
  const result = await myFun();
  console.log(result);
//see no returns here
}
getResult();

Übrigens funktioniert das Warten nicht innerhalb von .map(), .filter(), .forEach() usw. Sie müssen eine einfache for()-Schleife verwenden.