web-dev-qa-db-de.com

Daten von Axios API zurückgeben

Ich versuche, eine Node.JS-Anwendung zum Erstellen und Empfangen von API-Anforderungen zu verwenden. Es stellt eine Abrufanforderung an einen anderen Server über Axios mit Daten bereit, die er von einem API-Aufruf erhält, den er empfängt. Das zweite Snippet ist, wenn das Skript die Daten aus dem Aufruf in zurückgibt. Es wird zwar tatsächlich in die Konsole geschrieben, aber nicht in der zweiten API zurückgesendet.

function axiosTest () {
axios.get(url)
.then(function (response) {
        console.log(response.data);
// I need this data here ^^
return response.data;
})
.catch(function (error) {
    console.log(error);
});
}

...

axiosTestResult = axiosTest(); 
response.json({message: "Request received!", data: axiosTestResult});

Mir ist bewusst, dass dies falsch ist. Ich versuche nur einen Weg zu finden, damit es funktioniert. Die einzige Möglichkeit, Daten aus dieser Datenbank herauszuholen, ist über console.log, was in meiner Situation nicht hilfreich ist.

9
Bunkerguy

Bringen Sie das Versprechen aus dem Axios-Aufruf in der axiosTest-Funktion zurück, und holen Sie den Wert aus dem Versprechen, wenn Sie es mit einem anderen .then aufrufen.

function axiosTest() {
  return axios.get(url).then(response => {
    // returning the data here allows the caller to get it through another .then(...)
    return response.data
  })
}

axiosTest().then(data => {
  response.json({ message: 'Request received!', data })
})

Ich würde auch empfehlen, mehr darüber zu erfahren, wie Versprechen funktionieren: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises

19
kingdaro

Ich habe vor dem Aufruf der Axios ein leeres Array erstellt und nach .then (Funktion (Antwort)) die notwendigen Daten in das Array gepusht, um am Ende der Funktion das Array zurückzugeben

function axiosTest () {
     var strr = [];
        axios.get(url)
       .then(function(response){
               strr.Push(response.data);
        })


        .catch(function(error){
               console.log(error);
           });
        return strr;
}   
6
Fahad_Shovon

Die Axios-Bibliothek erstellt ein Promise () -Objekt. Promise ist ein in JavaScript ES6 integriertes Objekt. Wenn dieses Objekt mit dem neuen Schlüsselwort instanziiert wird, wird eine Funktion als Argument verwendet. Diese einzelne Funktion benötigt wiederum zwei Argumente, von denen jedes auch eine Funktion ist - Auflösen und Zurückweisen.

Versprechungen führen den clientseitigen Code aus und können aufgrund descoolJavascript-asynchronen Flusses möglicherweise ein oder zwei Dinge lösen, diese Lösung (die im Allgemeinen als semantisch äquivalent zu der einer Versprechung angesehen wird) Erfolg) oder diese Ablehnung (weithin als fehlerhafte Lösung angesehen). Beispielsweise können wir einen Verweis auf ein Promise-Objekt enthalten, das eine Funktion umfasst, dieeventuellein Antwortobjekt zurückgibt (das im Promise-Objekt enthalten wäre). Eine Möglichkeit, ein solches Versprechen zu verwenden, besteht darin, darauf zu warten, dass das Versprechen ineine Art Antwortaufgelöst wird.

Möglicherweise möchten wir nicht darauf warten, dass unsere API einen Aufruf zurückgibt. Wir möchten, dass unsere Benutzeroberflächeausführen kann, währendauf die API-Antwort wartet. Andernfalls hätten wir eine sehr langsame Benutzeroberfläche. Wie gehen wir mit diesem Problem um?

Nun, ein Versprechen istasynchron. In einer Standardimplementierung von Engines, die für die Ausführung von Javascript-Code verantwortlich sind (z. B. Node oder der allgemeine Browser), wird dieser in einem anderen Prozess aufgelöst, obwohl wir nicht im Voraus wissen, wie das Ergebnis des Versprechens aussehen wird. Eine übliche Strategie ist es, dannsendunsere Funktionen (dh eine React setState-Funktion für eine Klasse) auf das Versprechen, abhängig von einigen, zu lösen Art der Bedingung (abhängig von der Auswahl der Bibliothek) Dies führt dazu, dass unsere lokalen Javascript-Objekte auf der Grundlage der versprochenen Auflösung aktualisiert werden. Anstelle von Gettern und Setzern (in herkömmlichem OOP) können Sie sich Funktionen vorstellen, die Sie möglicherweisesendan Ihre asynchronen Methoden.

In diesem Beispiel verwende ich Fetch, damit Sie verstehen können, was in dem Versprechen vor sich geht, und ob Sie meine Ideen in Ihrem Axios-Code replizieren können. Fetch istim Grunde genommen ähnlichzu Axios ohne die angeborene JSON-Konvertierung und hat einen anderen Ablauf zum Lösen von Versprechungen (den Sie in der Axios-Dokumentation nachlesen sollten).

GetCache.js

const base_endpoint = BaseEndpoint + "cache/";
// Default function is going to take a selection, date, and a callback to execute.
// We're going to call the base endpoint and selection string passed to the original function.
// This will make our endpoint.
export default (selection, date, callback) => {  
  fetch(base_endpoint + selection + "/" + date) 
     // If the response is not within a 500 (according to Fetch docs) our promise object
     // will _eventually_ resolve to a response. 
    .then(res => {
      // Lets check the status of the response to make sure it's good.
      if (res.status >= 400 && res.status < 600) {
        throw new Error("Bad response");
      }
      // Let's also check the headers to make sure that the server "reckons" its serving 
      //up json
      if (!res.headers.get("content-type").includes("application/json")) {
        throw new TypeError("Response not JSON");
      }
      return res.json();
    })
    // Fulfilling these conditions lets return the data. But how do we get it out of the promise? 
    .then(data => {
      // Using the function we passed to our original function silly! Since we've error 
      // handled above, we're ready to pass the response data as a callback.
      callback(data);
    })
    // Fetch's promise will throw an error by default if the webserver returns a 500 
    // response (as notified by the response code in the HTTP header). 
    .catch(err => console.error(err));
};

Jetzt haben wir unsere GetCache-Methode geschrieben. Sehen wir uns an, wie es aussieht, den Status einer React component als Beispiel zu aktualisieren ...

Einige React Component.jsx

// Make sure you import GetCache from GetCache.js!

resolveData() {
    const { mySelection, date } = this.state; // We could also use props or pass to the function to acquire our selection and date.
    const setData = data => {
      this.setState({
        data: data,
        loading: false 
        // We could set loading to true and display a wee spinner 
        // while waiting for our response data, 
        // or rely on the local state of data being null.
      });
    };
  GetCache("mySelelection", date, setData);
  }

Letztendlich "geben" Sie keine Daten als solche zurück, ich meine, Sie können es, aber es ist idiotischer, Ihre Denkweise zu ändern ... Jetzt senden wirDaten an asynchrone Methoden.

Viel Spaß beim Codieren!

Eine äußerst wichtige Daumenregel für Ihren js-Code auf Clientseite besteht darin, die Datenverarbeitungs- und UI-Gebäudelogik in verschiedene Funktionen aufzuteilen, was auch für das Abrufen von Axios-Daten gilt. Auf diese Weise wird der Kontrollfluss und die Fehlerbehandlung erheblich einfacher und einfacher zu handhaben, wie man daraus sehen kann ok fetch

und diese NOK holen

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>

       function getUrlParams (){
          var url_params = new URLSearchParams();
          if( window.location.toString().indexOf("?") != -1) {
             var href_part = window.location.search.split('?')[1]
             href_part.replace(/([^=&]+)=([^&]*)/g,
                function(m, key, value) {
                   var attr = decodeURIComponent(key)
                   var val = decodeURIComponent(value)
                   url_params.append(attr,val);
             });
          }
          // for(var pair of url_params.entries()) { consolas.log(pair[0]+ '->'+ pair[1]); }
          return url_params ;
       }


      function getServerData (url, urlParams ){
          if ( typeof url_params == "undefined" ) { urlParams = getUrlParams()  }
          return axios.get(url , { params: urlParams } )
          .then(response => {
             return response ;
          })
          .catch(function(error) {
             console.error ( error )
             return error.response;
          })
       }

    // Action !!!
    getServerData(url , url_params)
        .then( response => {
           if ( response.status === 204 ) {
              var warningMsg = response.statusText
              console.warn ( warningMsg )
              return
           } else if ( response.status === 404 || response.status === 400) {
              var errorMsg = response.statusText // + ": "  + response.data.msg // this is my api
              console.error( errorMsg )
              return ;
           } else {
              var data = response.data
              var dataType = (typeof data)
              if ( dataType === 'undefined' ) {
                 var msg = 'unexpected error occurred while fetching data !!!'
                 // pass here to the ui change method the msg aka
                 // showMyMsg ( msg , "error")
              } else {
                 var items = data.dat // obs this is my api aka "dat" attribute - that is whatever happens to be your json key to get the data from
                 // call here the ui building method
                 // BuildList ( items )
              }
              return
           }

        })




    </script>
1
Yordan Georgiev

axiosTest() feuert asynchronously und wird nicht gewartet. 

Anschließend muss eine then()function angeschlossen werden, um die responsevariable (axiosTestData) zu erfassen.

Siehe Promise für weitere Informationen.

Siehe Async , um den Level zu erhöhen.

// Dummy Url.
const url = 'https://jsonplaceholder.typicode.com/posts/1'

// Axios Test.
const axiosTest = axios.get

// Axios Test Data.
axiosTest(url).then(function(axiosTestResult) {
  console.log('response.JSON:', {
    message: 'Request received',
    data: axiosTestResult.data
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>

0
Arman Charan