如何提高公理的速度？

Question

因为我刚开始使用axios，所以我在使用它时通常会遇到麻烦。具体来说，我现在正在制作一个react-infinite-scroll功能，但是当我将其速度与其他站点进行比较时，我的帖子(react-infinite-scroll功能)将被缓慢地显示出来。那么我想这个问题是由两个原因引起的

1. 我没有正确地使用axios
2. 有一件事使axios加速了速度，但我不使用它 这是我的代码，请给我一些建议，以提高我的http请求速度。

谢谢你阅读我的问题！

class MainPage extends Component {

    constructor(props) {
        super(props)
        axios.get("http://127.0.0.1:8000/api/question")
        .then(res => {
            this.setState({
                AnswerPostMultiList: res.data
            })
          }
        )
        .catch(err => {
            console.log(err)
        })
    }

    state = {
        AnswerPostMultiList : []
    }

    componentDidMount() {
        window.addEventListener("scroll", this.handleScroll);
    }

    componentWillUnmount() {
        window.removeEventListener("scroll", this.handleScroll);
    }

    handleScroll = () => {

        console.log("scroll is executing")

        const { innerHeight } = window;
        const { scrollHeight } = document.body;

        const scrollTop =
          (document.documentElement && document.documentElement.scrollTop) ||
          document.body.scrollTop;

        if (scrollHeight - innerHeight - scrollTop < 1000 && !this.props.isLoading["isLoading"]) {
          this.props.onIsLoading() #To prevent this code from calling back continuously, change the value of this.props.isLoading["isLoading"] to false 

              axios.get("http://127.0.0.1:8000/api/question")
              .then(res => {

              this.setState({
                  AnswerPostMultiList: this.state.AnswerPostMultiList.concat(res.data)
              })
              this.props.onIsLoading() #change the value of this.props.isLoading["isLoading"] to true 
            }
          )
          .catch(err => {
              console.log(err)
          })
        }
      };

    render() {
        return(
            <>

                <PageHeader />
                <div className="find_members">
                { this.state.AnswerPostMultiList.map((answerpost,index) => {
                    return <AnswerPostMulti question={answerpost.question_text} q_owner={answerpost.question_owner} answer={answerpost.answer_image} a_owner={answerpost.answer_owner} key={index} />
                  })
                }
                </div>

            </>
        )
    }
}



const mapDispatchToProps = (dispatch) => ({
    onIsLoading: () => {
        dispatch(isLoadingActions.isLoading())
    }
  })

  const mapStateToProps = state => ({
      isLoading: state.isLoading
  })


export default connect(mapStateToProps, mapDispatchToProps)(MainPage)

Answer 1

调用componentDidMount(){}. axios调用的最佳位置是在应用程序加载过程将按以下顺序进行-->初始呈现->稍后调用的componentDidMount方法。因此，在这里，您的应用程序框架将被加载，然后您可以获取数据并使用它到您的应用程序框架。

componentDidMount() {
         axios.get("http://127.0.0.1:8000/api/question")
        .then(res => {
            this.setState({
                AnswerPostMultiList: res.data
            })
          }
        )
        .catch(err => {
            console.log(err)
        });
    }