如何提高axios速度？

Posted 2023-02-22

【中文标题】如何提高axios速度？

【英文标题】：How to increase axios speed?

【发布时间】：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 好的，我会记住的，谢谢！

【参考方案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)
        );