Question

我正在处理一个非常慢的ajax get请求，该请求仅在使用chrome的页面加载时出现。这意味着我没有正确加载某些内容，或者我的API对前几个请求没有响应。

然而： 1.在使用safari的初始页面加载时，我没有看到此问题 2.在初始页面加载时使用chrome-incognito我没有看到这个问题

我该怎么做才能解决这个问题？

我有以下reactjs类：

var helloWorld = React.createClass({
  getInitialState: function () {
     return {items: []};
  },

  findByName: function ( event, action ) {
    payload = {'q':event.target.value}
    $.ajax({
      data: payload,
      url: '//127.0.0.1:3000/api/search',
      type: "GET",
      dataType: "json",
      success: function ( data ) {
        // console.log(data.results)
        this.setState({ items: data.results });
      }.bind(this)
    });

  },

    render: function() {
        return (
    <div className="container">
        <div className="row">

          <div className="col-md-12">
            <div className="input-group matter-index-top">
              <input type="text" className="form-control" onChange={this.findByName} placeholder="Search plant name" />
            </div>
          </div>

        </div>
        <hr />
        <ItemList items={ this.state.items } />
      </div>
            )
    }
});

React.render(
    React.createElement(helloWorld, null),
    document.getElementById('content')
)

在使用chrome请求的初始页面加载需要永久停顿并停顿约10-20秒：

后续请求会尽快输入：

当我重新加载页面或Safari时，此问题不会影响Chrome Incognito：

最后，在请求停止时查看标题：

Answer 1

上述问题是API缓慢的迹象。它与React，请求或任何与我的应用程序无关。

出现上述问题的原因是因为本地运行的API服务器没有线程化。使用此标志启动Flask服务器解决了数小时的问题：

./run.py runserver --port=3000 --threaded

有关详细信息，请参阅此帖子：Slow Requests on Local Flask Server

Reactjs使用chrome从初始页面加载初始ajax调用非常慢

1 个答案: