2017-12-30 34 views
1

Wie kann ich die Konsole protokollieren - oder irgendetwas mit den Daten innerhalb einer asynchronen Funktion zurückgegeben?JavaScript async-Funktion Konsole protokolliert die zurückgegebenen Daten

Beispiel: JS-Datei:

async function getData(){ 
     try { 
     $.getJSON('./data.json', (data) => { 
      return data; 
     }); 
     } catch(error) { 
     console.log("error" + error); 
     } finally { 
     console.log('done'); 
     } 
    } 

    console.log(getData()); 

JSON-Datei:

{ 
    "stuff": { 
     "First": { 
     "FirstA": { 
      "year": [2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017], 
      "Categories": ["Suspension", "Electrical", "Performance", "Motor"] 
     }, 
     "FirstB": { 
      "year": [2007, 2008, 2009, 2010, 2011, 2012], 
      "Categories": ["Suspension", "Electrical", "Performance", "Motor"] 
     } 
     }, 
     "Second": { 
     "SecondA": { 
      "year": [2002, 2003, 2004, 2005, 2006], 
      "Categories": ["Suspension", "Electrical", "Performance", "Motor"] 
     }, 
     "SecondB": { 
      "year": [2007, 2008, 2009, 2010, 2011, 2012], 
      "Categories": ["Suspension", "Electrical", "Performance", "Motor"] 
     } 
     } 
    } 
} 

Wie kann ich zurückkehren/erhalten Sie Zugriff auf alle Informationen in der JSON-Datei und mit ihr arbeiten. zum Beispiel möchte ich die "Erste" und "Zweite" nehmen und sie zu einem Div hinzufügen. Gleiches mit "FirstA" und "FirstB" und "SecondA" und "SecondB" ... und so weiter.

Gerade jetzt, wie es steht, ich Versprechen {: undefined}

Jede Hilfe wäre sehr dankbar.

--------- --------- UPDATE

Wenn ich ausführen, um das Konsolenprotokoll innerhalb der Funktion dann kann ich die JSON-Daten sehen, aber ich brauche den Zugang zu dem Daten außerhalb der Funktion.

Serge

+0

Mögliches Duplikat [? Wie kann ich die Antwort von einem asynchronen Aufruf zurückkehren] (https://stackoverflow.com/questions/14220321/how-do- i-Return-die-Antwort-von-einem-asynchronen Anruf) – Andreas

Antwort

3

Zwei Fragen:

  1. Um gesetzt den Auflösungswert der von der async Funktion erstellt Versprechen, müssen Sie von der async Funktion selbst eine return Anweisung verwenden. Ihr Code hat eine return in der getJSON Rückruf (die ignoriert wird), nicht die async Funktion selbst.

  2. Um erhalten die Auflösung Wert einer async Funktion, müssen Sie await es (oder sein Versprechen in der älteren Art und Weise verbrauchen, über then, etc.).

Für # 1, könnten Sie das Ergebnis await ing getJSON zurück:

async function getData() { 
    try { 
     return await $.getJSON('./data.json').promise(); 
    } 
    catch (error) { 
     console.log("error" + error); 
    } 
    finally { 
     console.log('done'); 
    } 
} 

Und für # 2, dann würden Sie müssen entweder await Ihre Funktion (dies würde wiederum Notwendigkeit werden innerhalb einer async-Funktion):

console.log(await getData()); 

... oder verbrauchen ihr Versprechen über then:

getData().then(data => { 
    console.log(data); 
}); 

Randbemerkung: Ihre getData Fehler versteckt, um sie in Auflösungen mit dem Wert Drehen undefined, die in der Regel keine gute Idee ist.Stattdessen sorgen dafür, dass sie den Fehler ausbreitet:

catch (error) { 
    console.log("error" + error); 
    throw error; 
} 

Dann natürlich sicher, dass irgendetwas mit getData entweder Griffe oder propagiert den Fehler, so dass sicher etwas irgendwo hat damit umgehen (sonst, erhalten Sie eine „nicht behandelte Ablehnung " Error).


Re Ihren Kommentar

how would I access the "stuff" in the json file from the log outside the function?

Der async Ergebnis/Auflösung Wert von getData ist das Objekt, das JSON definiert (es ist nicht mehr JSON, es analysiert wurde). So würden Sie .stuff darauf verwenden, zB:

// In an `async` function 
console.log((await getData()).stuff); 

// Or using `then`: 
getData().then(data => { 
    console.log(data.stuff); 
}); 
+0

TJ Crowder im ersten Beispiel was ist das "i" im i.getJSON und woher kommt es? Ich weiß, dass ich einige jQuery mit der Methode getJSON einspritze, aber nur testen, ob das funktioniert. – Sergio

+0

@Sergio: Es war ein Tippfehler (jetzt behoben). Was ist seltsam, da ich Copy and Paste verwendet habe. Also vielleicht kein Tippfehler, sondern ein Bearbeitungsfehler. :-) –

+0

hahaha ... es ist kein biggie. Ok, gerade getestet und jetzt passiert etwas. – Sergio

Verwandte Themen