So implementieren Sie richtig async/erwarten Sie

Question

Ich bin neu zu verwenden async/await - Ich versuche, Daten von einem API-Aufruf zurückzugeben und formatieren Sie es leicht.

Ich bin wirklich schwer zu erarbeiten, wie dies funktioniert wegen der asynchronen Art der Funktionen. Ich kann das Versprechen nicht halten, ohne dass der Browser einfach umkippt.

Meine erste Funktion ruft die API auf und erhält eine Antwort als JSON. Ich speichere dann eine Teilmenge dieser Daten json.recommendations

function getRecs() { 
    const requestUrl = `blahblah`; 
    const options = { 
     headers: { 
      'Content-type': 'application/json', 
      Accept: 'application/json', 
     }, 
     method: 'GET', 
    }; 

    fetch(requestUrl, options).then((res) => { 
     if (res.ok) { 
      return res.json(); 
     } 
     throw new Error('Error!!??', res); 
    }).then((json) => { 
     return json.recommendations; 
    }); 
} 

Meine zweite Funktion nimmt json.recommendations und hat einige Aufräumen unerwünschte Daten zu löschen und eine neue Reihe von Daten zurückgeben, diejenigen, die meine Filter entsprechen.

async function getInStockRecs() { 
    const recs = await getRecs(); 
    if (recs !== undefined) { 
     return recs.filter(function(rec){ 
      return rec.isInStock === true; 
     }); 
    } 
} 

Eine dritte Funktion formatiert die Daten weiter:

async function topThreeArray() { 
    const inStockRecs = await getInStockRecs(); 
    const topThree =[]; 
    for (let i = 0; i < i <= 3; i++) { 
     topThree.push(inStockRecs[0]); 
    } 
    return topThree; 
} 

Durch Verwendung await I jede Funktion sollte nur dann ausgeführt, wenn die Daten korrekt aus dem vorherigen zurückgegeben wurden. Das Ausführen der obigen Anweisungen stürzt jedoch die Seite ab und ich kann nichts tun, um zu debuggen, da es einfach abstürzt. Wo gehe ich falsch?

Answer 1

Sie kehren nicht alles in Ihrer getRecs() Funktion (Sie kehren nur in den Rückrufen zum fetch() Anruf)

Da Sie async-await an anderer Stelle verwenden, warum nicht verwendet für die getRecs() Funktion zu ?:

async function getRecs() { 
    const requestUrl = `blahblah`; 
    const options = { 
    headers: { 
     'Content-type': 'application/json', 
     Accept: 'application/json', 
    }, 
    method: 'GET', 
    }; 

    const res = await fetch(requestUrl, options); 
    if (res.ok) { 
     return res.json().recommendations; 
    } 
    throw new Error('Error!!??', res); 
} 

Andernfalls müssten Sie die fetch() Gespräch zurückzukehren selbst:

return fetch(requestUrl, options).then((res) => { 
    ... 

Der Grund für den Absturz des Browsers ist, dass die Bedingung in der for Schleife in topThreeArray() seltsam ist (i < i <= 3) und zu einer Endlosschleife führt.
Grundsätzlich i < i wertet false, die implizit in 0 erzwungen wird, so wird die Bedingung effektiv 0 <= 3, die immer wahr ist.

Schließlich möchte ich darauf hinweisen, dass Sie sorgfältig überlegen sollten, ob async-await in erster Linie bei der Ausführung in einem Browser als Unterstützung geeignet ist, da es in Browsern immer noch sehr zerbrechlich und sketchy ist.