Returning data from Axios API

Question

I am trying to use a Node JS application to make and receive API requests  It does a get request to another server using Axios with data it receives from an API call it receives  The second snippet is when the script returns the data from the call in  It will actually take it and write to the console  but it won t send it back in the second API   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      I m aware this is wrong  I m just trying to find a way to make it work  The only way I can seem to get data out of it is through console log  which isn t helpful in my situation

User · Answer

IMO extremely important rule of thumb for your client side js code is to keep separated the data handling and ui building logic into different funcs, which is also valid for axios data fetching ... in this way your control flow and error handlings will be much more simple and easier to manage, as it could be seen from this ok fetch

and this NOK fetch

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

User · Answer

axiosTest   is firing asynchronously and not being waited for    A then   function needs to be hooked up afterwards in order to capture the response variable  axiosTestData    See Promise for more info   See Async to level up    x000D   x000D     Dummy Url  x000D  const url    https   jsonplaceholder typicode com posts 1  x000D   x000D     Axios Test  x000D  const axiosTest   axios get x000D   x000D     Axios Test Data  x000D  axiosTest url  then function axiosTestResult    x000D    console log  response JSON      x000D      message   Request received   x000D      data  axiosTestResult data x000D       x000D     x000D   lt script src  https   cdnjs cloudflare com ajax libs axios 0 18 0 axios js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

The issue is that the original axiosTest   function isn t returning the promise  Here s an extended explanation for clarity  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    gt  response data          return it     return dataPromise       now we can use that data from the outside  axiosTest        then data   gt            response json   message   Request received    data                catch err   gt  console log err    The function can be written more succinctly  function axiosTest         return axios get url  then response   gt  response data     Or with async await  async function axiosTest         const response   await axios get url      return response data     Guide on using promises Info on async functions

User · Answer

You can use Async - Await   async function axiosTest       const response   await axios get url     const data   await response json

User · Answer

async handleResponse          const result   await this axiosTest               async axiosTest          return await axios get url       then function  response                console log response data               return response data     catch function  error        console log error           You can find check https   flaviocopes com axios  post-requests url and find some relevant information in the GET section of this post

User · Answer

The axios library creates a Promise   object  Promise is a built-in object in JavaScript ES6  When this object is instantiated using the new keyword  it takes a function as an argument  This single function in turn takes two arguments  each of which are also functions     resolve and reject    Promises execute the client side code and  due to cool Javascript asynchronous flow  could eventually resolve one or two things  that resolution  generally considered to be a semantically equivalent to a Promise s success   or that rejection  widely considered to be an erroneous resolution   For instance  we can hold a reference to some Promise object which comprises a function that will eventually return a response object  that would be contained in the Promise object   So one way we could use such a promise is wait for the promise to resolve to some kind of response    You might raise we don t want to be waiting seconds or so for our API to return a call  We want our UI to be able to do things while waiting for the API response  Failing that we would have a very slow user interface  So how do we handle this problem    Well a Promise is asynchronous  In a standard implementation of engines responsible for executing Javascript code  such as Node  or the common browser  it will resolve in another process while we don t know in advance what the result of the promise will be  A usual strategy is to then send our functions  i e  a React setState function for a class  to the promise  resolved depending on some kind of condition  dependent on our choice of library   This will result in our local Javascript objects being updated based on promise resolution  So instead of getters and setters  in traditional OOP  you can think of functions that you might send to your asynchronous methods   I ll use Fetch in this example so you can try to understand what s going on in the promise and see if you can replicate my ideas within your axios code  Fetch is basically similar to axios without the innate JSON conversion  and has a different flow for resolving promises  which you should refer to the axios documentation to learn     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    gt        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   gt             Lets check the status of the response to make sure it s good        if  res status  gt   400  amp  amp  res status  lt  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   gt             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   gt  console error err         Now we ve written our GetCache method  lets see what it looks like to update a React component s state as an example     Some 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   gt          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         Ultimately  you don t  return  data as such  I mean you can but it s more idiomatic to change your way of thinking    Now we are sending data to asynchronous methods    Happy Coding

User · Answer

I know this post is old  But i have seen several attempts of guys trying to answer using async and await but getting it wrong  This should clear it up for any new references  async function axiosTest           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

User · Answer

you can populate the data you want with a simple callback function  let s say we have a list named lst that we want to populate  we have a function that pupulates pupulates  list  const lst         const populateData    data    gt   lst push data     now we can pass the callback function to the function which is making the axios call and we can pupulate the list when we get data from response  now we make our function that makes the request and pass populateData as a callback function  function axiosTest  populateData            axios get url          then function response                  populateData response data                       catch function error                  console log error

[javascript] Returning data from Axios API

Examples related to javascript

Examples related to node.js

Examples related to rest

Examples related to axios