How to consume Axios all from Node.js backend in ReactJS frontend?

Question

I have multiple get requests with axios.all in my Node.js backend. I want to return the response to the function and then consume this as API in ReactJS. When I use console.log to output the data in the React component, I get Promise { <state>: "pending" }, but I want to get data from the Node.js backend.

Could you please help me?

Node.js backend:

export async function getArrivalPorts() {

    let endpoints = [
        'https://api.github.com/users/ejirocodes',
        'https://api.github.com/users/ejirocodes/repos',
        'https://api.github.com/users/ejirocodes/followers',
        'https://api.github.com/users/ejirocodes/following'];

   const response = await axios.all(endpoints.map((endpoint) => axios.get(endpoint)))
       .then(axios.spread((
           {data: user},
           {data: repos},
           {data: followers},
           {data: following}) => {
           return ({user, repos, followers, following});
       }))
       .catch(errors => {
           console.log(errors)
       })
    return(response)

}

Node.js router

router.get('/arrival', getArrivalPorts)

ReactJS frontend

function From ()
{
    const data = axios.get('http://localhost:5000/arrival')
    console.log(data)
}

Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — UncleDave, Oct 19 '22 at 13:23
Read this https://www.freecodecamp.org/news/how-to-use-axios-with-react/#how-to-make-a-get-request. — Richard Rublev, Oct 19 '22 at 13:24

Bad Dobby · Answer 1 · 2022-10-19T16:11:45.750

0

use .then() method of Promise object

function From() {
    const data = axios.get('http://localhost:5000/arrival')
      .then(data => {
        console.log(data);
      });
}

reply to your comment

Your current problem looks like CORS rejection. you can just handle it by configuring proxy server if you used create-react-app to make your project.

official documentation to configure proxy in CRA

Make sure that your frontend project is "create-react-app" based.
open the package.json at the root directory of your frontend proejct.
add this property to the package.json

"proxy": "http://localhost:5000",

If you have no idea where to put this code in the package.json, just put at the top of the "scripts" property, so that your package.json should look like this:

{
  "name": "blabla...",
  // ... some codes
  "dependencies": {
    // ...some packages
  },
  "proxy": "http://localhost:5000",
  "scripts": {
    "start": "react-scripts start",
    // ...some scripts
  },
  // blablabla
}

start (or restart) the dev-server of your frontend project

edited Oct 19 '22 at 16:11

answered Oct 19 '22 at 13:50

Bad Dobby

811
2
8
22

i get: Uncaught (in promise) Error: Request aborted – Josip Marić Oct 19 '22 at 14:07
@JosipMarić It may be the CORS rejection (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS). Maybe your react dev server is localhost:3000 (see the url in the browser). Browsers blocks the api call if domain of the page and the domain of the http request is not same (difference of the port is also treated as different domain) – Bad Dobby Oct 19 '22 at 15:56
@JosipMarić Best practice to fix this in the "create-react-app" based project, is using dev server proxy (https://create-react-app.dev/docs/proxying-api-requests-in-development/). just add "proxy" property in the package.json of your frontend project. Fill the value of the added "proxy" property as "http:/ /localhost:5000". after you fill and save your package.json, restart the react dev server of your frontend project. – Bad Dobby Oct 19 '22 at 16:01
thank you guys for the advice but unfortunately i get same error: request aborted. I have"create-react-app" and i have added proxy to the package.json – Josip Marić Oct 19 '22 at 17:31

score 0 · Answer 2 · answered Oct 20 '22 at 12:05

let endpoints = [
  'https://api.github.com/users/ejirocodes',
  'https://api.github.com/users/ejirocodes/repos',
  'https://api.github.com/users/ejirocodes/followers',
  'https://api.github.com/users/ejirocodes/following'
];

// Return our response in the allData variable as an array
Promise.all(endpoints.map((endpoint) => axios.get(endpoint))).then(
  axios.spread((...allData) => {
    console.log({ allData });
  })
);

Promise.all vs. axios.all

As of July 15, 2020, Axios updated its GitHub README file to reflect that the axios.all helper method has been deprecated and should be replaced with Promise.all.

Since there is an unofficial proposal to get rid of both the axios.all and axios.spread methods completely in version 1 of Axios, let’s see how we can deprecate the axios.all methods using native JavaScript features like Promise.all and ES6 parameter restructuring.

Check this for more details.

Hi! Thank you for your answer but error still remains the same: "Request aborted" — Josip Marić, Oct 21 '22 at 11:59

score 0 · Answer 3 · answered Oct 21 '22 at 14:29

i was missing req res part of the function

export async function getArrivalPorts(req, res) {

    let endpoints = [
        'https://api.github.com/users/ejirocodes',
        'https://api.github.com/users/ejirocodes/repos',
        'https://api.github.com/users/ejirocodes/followers',
        'https://api.github.com/users/ejirocodes/following'];

try{

   const response = await axios.all(endpoints.map((endpoint) => axios.get(endpoint)))
       .then(axios.spread((
           {data: user},
           {data: repos},
           {data: followers},
           {data: following}) => {
           return ({user, repos, followers, following});
       }))
       .catch(errors => {
           console.log(errors)
       })
    res.json(response)
    }catch(err){
     console.log(err)
   }

}

How to consume Axios all from Node.js backend in ReactJS frontend?

3 Answers3

reply to your comment