如何提高axios速度？答案

【问题标题】：How to increase axios speed?如何提高axios速度？
【发布时间】：2019-06-02 13:38:45
【问题描述】：

因为我是新来使用 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)

【问题讨论】：

您可以在 devtools 网络选项卡中查看请求的执行情况。除了你，没有人能做到这一点。对于初学者，您可以尝试去抖动handleScroll。
@estus 感谢您的回复，是的！我会想尽一切办法自己解决！但是，如果我尝试了所有方法，但都行不通，我能从你那里得到一些简单的建议吗..？
尝试在 SO 上搜索“react scroll debounce”，有很多工作示例。如果您尝试的某些方法对您不起作用，请考虑重新提出问题并直接解决问题。更具体的问题更有可能得到正确答案。
@estus 好的，我会记住的，谢谢！

标签： reactjs http django-rest-framework react-redux axios

【解决方案1】：

调用 axios API 调用的最佳位置是 componentDidMount(){}。应用程序加载过程将按照骨架->初始渲染->稍后调用componentDidMount方法的顺序。因此，您的应用骨架将在此处加载，然后您可以获取数据并将其用于您的应用骨架。

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

【讨论】：