Zurückgeben von Daten von der Axios-API

Lesezeit: 10 Minuten

Benutzer-Avatar
Bunkertyp

Ich versuche, eine Node.JS-Anwendung zu verwenden, um API-Anfragen zu stellen und zu empfangen. Es führt eine Get-Anforderung an einen anderen Server aus, der Axios mit Daten verwendet, die es von einem empfangenen API-Aufruf erhält. Das zweite Snippet ist, wenn das Skript die Daten aus dem Aufruf zurückgibt. Es wird sie tatsächlich nehmen und in die Konsole schreiben, aber es wird sie nicht an die zweite API zurücksenden.

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});

Ich bin mir bewusst, dass das falsch ist, ich versuche nur, einen Weg zu finden, damit es funktioniert. Die einzige Möglichkeit, wie ich Daten herausholen kann, ist die Datei console.log, was in meiner Situation nicht hilfreich ist.

  • Mögliches Duplikat von Wie gebe ich die Antwort von einem asynchronen Aufruf zurück?

    – Nikolauswmin

    26. Februar 2018 um 1:53 Uhr

  • Ich habe das Gefühl, dass die Leute bei dieser Frage etwas zu weit gegangen sind. Im Grunde fehlt Ihnen eine Rückgabe in Ihrer axiosTest-Funktion, und Sie haben nicht auf das Ergebnis gewartet. Wenn Sie mit Promises arbeiten, geben Sie das Promise immer zurück und warten Sie darauf, wenn Sie das Ergebnis benötigen

    – Nielsvandenbroeck

    3. November 2021 um 15:29 Uhr

Benutzer-Avatar
Kingdaro

Das Problem ist, dass das Original axiosTest() Die Funktion gibt das Versprechen nicht zurück. Hier ist eine erweiterte Erklärung zur Verdeutlichung:

function axiosTest() {
    // create a promise for the axios request
    const promise = axios.get(url)

    // using .then, create a new promise which extracts the data
    const dataPromise = promise.then((response) => response.data)

    // return it
    return dataPromise
}

// now we can use that data from the outside!
axiosTest()
    .then(data => {
        response.json({ message: 'Request received!', data })
    })
    .catch(err => console.log(err))

Die Funktion lässt sich kürzer schreiben:

function axiosTest() {
    return axios.get(url).then(response => response.data)
}

Oder mit async/await:

async function axiosTest() {
    const response = await axios.get(url)
    return response.data
}

  • Ich kann das anscheinend nicht zum Laufen bringen, wenn sich die Funktion axiosTest() in einer separaten Datei vom Aufruf der Funktion befindet: axiosTest().then …. etwas Besonderes in diesem Fall zu tun?

    – mbenhalima

    4. April 2019 um 2:26 Uhr

  • Dasselbe gilt für mich, ich möchte die Funktion axiosTest () in einer anderen Datei als die aufrufende Funktion haben. Jemand eine Idee dazu?

    – raphael_mav

    4. Mai 2019 um 22:19 Uhr

  • Es hört sich so an, als würden Sie nur fragen, wie Sie Ihren Code in separate Dateien aufteilen können. Sehen Sie sich die Verwendung von Modulen mit JavaScript an

    – kingdaro

    7. Mai 2019 um 15:18 Uhr

  • Du bist der wahre MVP @kingdaro Ich stecke seit Ewigkeiten in meinem Code fest, dann habe ich deine Antwort gefunden, was für eine Legende

    – Deich

    13. April 2020 um 18:55 Uhr

  • Bei mir funktioniert es nur mit await vor axios.post()

    – Jie

    18. Oktober 2020 um 14:11 Uhr


Benutzer-Avatar
Muteshi

Ich weiß, dieser Beitrag ist alt. Aber ich habe mehrere Versuche von Leuten gesehen, die versuchten, mit async zu antworten, und warteten, aber es falsch machten. Dies sollte es für neue Referenzen klären

UPDATE: Mai 2022
Diese Antwort ist immer noch sehr interessant und wurde aktualisiert, um Pfeilfunktionen zu verwenden

const axiosTest = async () {
      try {
        const {data:response} = await axios.get(url) //use data destructuring to get data from the promise object
        return response
      }
        
      catch (error) {
        console.log(error);
      }
    }

  • Dies ist die richtige Antwort – wenn Sie den Code in Ihrer App debuggen, scheint die Funktion, die die obige Funktion aufruft, sowie alle anderen Funktionen in der Kette zurückzukehren, aber einen Moment später wird der Code ausgeführt, beginnend nach dem await. Sie müssen alle Funktionen in Ihrer App asynchronisieren und alle mit await aufrufen. Setzen Sie einen Breakpoint auf die return-Anweisung und einen auf die nächste Codezeile im Aufrufer – alles wird klar.

    – Rodney P. Barbati

    12. September 2020 um 16:38 Uhr

Benutzer-Avatar
fahad991

Sie können die gewünschten Daten mit einer einfachen Callback-Funktion füllen, sagen wir, wir haben eine Liste mit dem Namen lst die wir füllen möchten, haben wir eine Funktion, die die Liste füllt,

const lst = [];  
const populateData = (data) => {lst.push(data)} 

Jetzt können wir die Callback-Funktion an die Funktion übergeben, die den Axios-Aufruf durchführt, und wir können die Liste füllen, wenn wir Daten von der Antwort erhalten.

Jetzt machen wir unsere Funktion, die die Anfrage stellt und übergibt populateData als Callback-Funktion.

function axiosTest (populateData) {
        axios.get(url)
       .then(function(response){
               populateData(response.data);
        })
        .catch(function(error){
               console.log(error);
         });
}   

  • danke @Fahad_Shovon! die Fehlerbehebung hat mich einen Tag gekostet, was ich mit Ihrer Lösung gelöst habe

    – mbenhalima

    3. April 2019 um 16:49 Uhr

  • Sie hassen es, es zu sehen, Leute.

    – Cameron Wilby

    11. März 2020 um 5:19 Uhr

Benutzer-Avatar
Callum Dempsey Leach

Die Axios-Bibliothek erstellt ein Promise()-Objekt. Promise ist ein integriertes Objekt in JavaScript ES6. Wenn dieses Objekt mit dem Schlüsselwort new instanziiert wird, nimmt es eine Funktion als Argument an. Diese einzelne Funktion nimmt wiederum zwei Argumente entgegen, von denen jedes ebenfalls Funktionen sind – auflösen und ablehnen.

Promises führen den clientseitigen Code aus und aufgrund von Kalt Der asynchrone JavaScript-Fluss könnte schließlich ein oder zwei Dinge lösen, diese Auflösung (allgemein als semantisches Äquivalent zum Erfolg eines Versprechens angesehen) oder diese Ablehnung (weithin als fehlerhafte Auflösung angesehen). Zum Beispiel können wir einen Verweis auf ein Promise-Objekt halten, das eine Funktion enthält, die wird letztlich ein Response-Objekt zurückgeben (das im Promise-Objekt enthalten wäre). Eine Möglichkeit, ein solches Versprechen zu verwenden, besteht also darin, zu warten, bis sich das Versprechen löst irgendeine Art von Antwort.

Sie könnten ansprechen, dass wir nicht Sekunden oder so warten wollen, bis unsere API einen Anruf zurückgibt! Wir wollen, dass unsere Benutzeroberfläche in der Lage ist, Dinge zu tun während Warten auf die API-Antwort. Andernfalls hätten wir eine sehr langsame Benutzeroberfläche. Wie gehen wir also mit diesem Problem um?

Nun, ein Versprechen ist asynchron. In einer Standardimplementierung von Engines, die für die Ausführung von Javascript-Code verantwortlich sind (z. B. Node oder der gängige Browser), wird er in einem anderen Prozess aufgelöst, während wir nicht im Voraus wissen, was das Ergebnis des Promise sein wird. Eine übliche Strategie ist dann senden unsere Funktionen (dh eine React-setState-Funktion für eine Klasse) auf das Promise, gelöst in Abhängigkeit von einer Art Bedingung (abhängig von unserer Wahl der Bibliothek). Dies führt dazu, dass unsere lokalen Javascript-Objekte basierend auf der Promise-Auflösung aktualisiert werden. Anstelle von Gettern und Settern (im traditionellen OOP) können Sie sich also Funktionen vorstellen, die Sie möglicherweise verwenden senden zu Ihren asynchronen Methoden.

Ich werde in diesem Beispiel Fetch verwenden, damit Sie versuchen können, zu verstehen, was in dem Versprechen vor sich geht, und sehen, ob Sie meine Ideen in Ihrem Axios-Code replizieren können. Holen ist grundsätzlich ähnlich zu axios ohne die angeborene JSON-Konvertierung und hat einen anderen Ablauf zum Auflösen von Promises (was Sie in der axios-Dokumentation erfahren 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 + "https://stackoverflow.com/" + 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 als Beispiel an, wie es aussieht, um den Status einer React-Komponente 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 “gibt” man keine Daten als solche zurück, ich meine, man kann, aber es ist idiomatischer, seine Denkweise zu ändern … Jetzt sind wir es Senden Daten zu asynchronen Methoden.

Viel Spaß beim Codieren!

Benutzer-Avatar
Arman Charan

axiosTest() muss zurück axios.getdie wiederum a zurückgibt Promise.

Von dort, then kann verwendet werden, um eine Funktion auszuführen, wenn es gesagt wird Promise beschließt.

Sehen Promise Für mehr Information.

Alternative, await kann im Rahmen von einigen verwendet werden async Funktion.

// 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>

IMO ist eine äußerst wichtige Faustregel für Ihren clientseitigen JS-Code, die Datenverarbeitung und die UI-Erstellungslogik in verschiedene Funktionen zu trennen, was auch für das Abrufen von Axios-Daten gilt … auf diese Weise werden Ihr Kontrollfluss und Ihre Fehlerbehandlung viel sein einfacher und handhabbarer, wie man hier sehen kann
ok holen

und das
NOK abholen

<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>

Benutzer-Avatar
uqi8

Nach 6 Stunden Flattern wurde mir klar, dass es sich um ein Einzeilenproblem handelte. Wenn Sie in den Axios-Lebenszyklus eingreifen, haben Sie möglicherweise diese Zeile vergessen:

componentDidMount() {
    this.requestInterceptor = axios.interceptors.request.use((request) => {
    this.updateApiCallFor(request.url, true);
    return request;
  });

    this.responseInterceptor = axios.interceptors.response.use((response) => {
    this.updateApiCallFor(response.config.url, false);

    return response; // THIS LINE IS IMPORTANT !

  }, (error) => {
    this.updateApiCallFor(error.config.url, false);
    throw error;
  });

1225700cookie-checkZurückgeben von Daten von der Axios-API

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy