在 react 中使用 Axios 在一个 componentDidMount 中调用多个 API答案

【问题标题】：multiple API calls in one componentDidMount using Axios in react在 react 中使用 Axios 在一个 componentDidMount 中调用多个 API
【发布时间】：2021-09-24 06:00:48
【问题描述】：

这是我对日期范围选择器的单个 API 调用的 React js 代码。现在我想用 componentDidMount 方法在 React 中调用多个 API，如果可以的话怎么做

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

【问题讨论】：

是什么拒绝你打另一个电话？是否要根据两个 axios 调用结果setState？
额外的异步请求有哪些？ stackoverflow.com/help/minimal-reproducible-example
如果您想进行多次调用，只需在完成一项任务后在.then() 方法上使用承诺或标记。 [提示：使函数异步并一起使用 Promise ]
@DrewReese 如何在 react js URL 中传递参数，
使用像`127.0.0.1:8000/hvals_hash?key=${key}`这样的字符串模板？

标签： javascript reactjs api axios fastapi

【解决方案1】：

使用.then() 方法创建请求链..

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

【讨论】：

谢谢，当我尝试这种方法时，我在控制台中得到了所有响应，但我希望一次只有一个响应，我该怎么做，您可以提出任何建议
@HariprasathLakshmanan 一次回复一个？如果您在数组或对象中获得结果，那么您可以使用一些与它们相关的方法！
@Hariprasath Lakshmanan 我认为您想要做的是在提交表单时阻止默认操作？对..如果是，那么您可以做的是添加 onSubmit={myFormHandlerFunction} 并在调用函数时使用 e.preventDefault() 其中 e 是事件！ ..我认为您想像正常一样提交表单，如果是，那么在阻止正常操作之后，您可以做任何您认为合适的事情..您的任务完成后，只需使用 e.target.submit ！
查看js fiddle 只是为了大致了解我在上面所说的内容......（如有疑问，请随时提出）。
我还有一个……如果我像 31-08-21 这样向 API 发送请求，现在如何将其存储在快速 API 参数中。 Refer

【解决方案2】：

您可以根据需要在 componentDidMount 中添加更多 api。

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

【讨论】：

因为我使用过 redux ，所以我在 useEffect Hook 中调用了多个 api 函数。它对我有用。
正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。
@shaheerawan 你好，从API获取数据后如何获取数据
我没看懂，请进一步解释。