2

Here is my React js code for a single API call for a date range picker. now I want to call multiple API in React with componentDidMount Method is it possible if yes how can do that

import React,{ Component} from "react";
import axios from 'axios'

class PostList extends Component{
    constructor(props) {
        super(props)
    
        this.state = {
            posts: []
        }
    }
componentDidMount(){
    axios.get('http://127.0.0.1:8000/betweendays')
    .then(response => {
        this.setState({
            posts:response.data
        })
        console.log(response.data)
    })
}
    render() {
        const {posts} = this.state
        return (
            <div>
                <h1>get call in React js</h1>
                    {
                        posts.map(post => <div key = {post.id}>{post.id} </div>)
                    }
            </div>
        )
    }
}

export default PostList```
Improve this question
9
  • What denies you making another call? Do you want to setState based on both axios call results? Commented Sep 24, 2021 at 6:07
  • What are the additional asynchronous requests? stackoverflow.com/help/minimal-reproducible-example Commented Sep 24, 2021 at 6:09
  • If you want to make multiple calls just use promises or tag on .then() methods after one task is done. [Hint : make function async and use promises together ] Commented Sep 24, 2021 at 6:09
  • @DrewReese How to pass parameter in react js URL, Commented Oct 4, 2021 at 5:44
  • 1
    Use a string template like `127.0.0.1:8000/hvals_hash?key=${key}`? Commented Oct 4, 2021 at 5:53

2 Answers 2

Reset to default
1

Using .then() method to create chain of the requests..

componentDidMount() {
    axios.get('http://127.0.0.1:8000/betweendays')
        .then(response => {
            this.setState({
                posts: response.data
            })
            return response.data; //  returning response
        })
        .then(res => {
             // do another request Note we have the result from the above 
            // getting response returned before 
            console.log(res);
        })
        // Tag on .then here 
        .catch(error => console.log(error))
}
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thank you, when I try this method I got all responses in the console but I expect one response at a time how can I do that can you give any suggestions
@HariprasathLakshmanan One response at a time ? If you are getting results in array or object then you can use some methods related with them !
@Hariprasath Lakshmanan I think what you want to do is prevent the default action when form is submitted ? Right .. if yes then what you can do is add onSubmit={myFormHandlerFunction} and when function is called use e.preventDefault() where e is event ! .. what I think is you want to submit the form like normal if yes then after preventing the normal action you can do whatever you see fit .. After your task is completed just use e.target.submit !
Check this js fiddle just to get a rough idea about what I was talking in above ... ( Feel free to ask a doubt if any ).
I have one more... if I sent a request to API like 31-08-21, now how to store this in fast API parameter. Refer
0

You can add more apis in componentDidMount as u want.

componentDidMount(){
        axios.get('http://127.0.0.1:8000/betweendays')
        .then(response => {
            this.setState({
                posts:response.data
            })
            console.log(response.data)
        })
    axios.get('link')
        .then(response => {
            this.setState({
                posts:response.data
            })
            console.log(response.data)
        })
    }
Improve this answer

4 Comments

As I have used redux , I have called multiple api functions in useEffect Hook. and it worked for me.
As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
@shaheerawan Hello, how to fetch data after getting data from API
I did not understand it please explain further.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.