How to get data from multiple url's in Reactjs?

Question

I want to get json data from multiple url's and display it on frontend. Following are the url's:

1) localhost:3000/api/getdata1

2) localhost:3000/api/getdata2

3) localhost:3000/api/getdata3

Instead of using .fetch() on each of the url's like below:

.fetch('localhost:3000/api/getdata1')

.fetch('localhost:3000/api/getdata2')

.fetch('localhost:3000/api/getdata3')

Can this be done in more efficent way in ReactJs ?

I was trying:

const dataurls = [
    'localhost:3000/api/getdata1',
    'localhost:3000/api/getdata2',
    'localhost:3000/api/getdata3'
];
const promisedurl = dataurls.map(httpGet);

Promise.all(promisedurls)
.then(data=> {
    for (const d of data) {
        console.log(d);
    }
})
.catch(reason => {
    // Receives first rejection among the Promises
});

Please suggest which one should be used or is there any efficient way to do get data from multiple url's.

I would suggest you to make a new api that combines the data for all 3 requests and sends you the data. — Yash Thakur
– Yash Thakur, Commented Mar 3, 2018 at 8:16
@YashThakur Actually I want to query data from different API endpoints eg: localhost:3000/api/getdata3/search/query="searchterm" and display it. — stone rock
– stone rock, Commented Mar 10, 2018 at 12:22

Pavel Koryagin · Accepted Answer · 2018-03-03 07:45:19Z

2

ReactJS is a View layer library. It has nothing to do with how you aquire any data from server.

Even state libraries, like Redux and Reflux do not implement any method of fetching data. In most cases you do that in your custom app code. Sometimes using extra libraries (e.g. Redux middlewares).

So, yes: your Promise.all(<several https requests here>) is the most natural way to achieve that.

answered Mar 3, 2018 at 7:45

Pavel Koryagin

1,4911 gold badge13 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Nícolas Iensen Over a year ago

I agree with this answer, and you can also cache the data returned by these requests to be more efficient.

stone rock Over a year ago

@NícolasIensen How can I cache the data as I want to display data from different API endpoints by using search keyword eg: localhost:3000/api/getdata3/search/query="searchterm"

Pavel Koryagin Over a year ago

@stonerock There is no single answer on "how to cache". But the most trivial thing in your case is to use an object. Where key is url and value is response data (and then beware memory leaks).

stone rock Over a year ago

@PavelKoryagin How can I overcome memory leak. I am totally new to this and I couldn't understand how there will be memory leakage.

Pavel Koryagin Over a year ago

@stonerock Ok, then I recommend you to forget about caching, until you'll face real performance issues. "Premature optimization is the root of all evil" (c) Donald Knuth. Focus on two things: features (what you do) and code layers (how you do, espesically on what View is, what Model is).

|

Collectives™ on Stack Overflow

How to get data from multiple url's in Reactjs?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related