如何在ReactJS中同时调用多个ajax(并同步获得结果）

How to call multiple ajax at same time (and get results asychronous) in ReactJS?

本文关键字：ajax 同步 结果 ReactJS 调用      更新时间：2024-04-28

我想在ReactJS中发送多个ajax调用，我想知道代码是否按顺序执行。第二个ajax调用是否只在第一个ReactJS组件呈现后才发送？

var firstAJAX = React.createClass({
  componentWillMount: function() {
    this.state = {list: []};
  },
  componentDidMount: function() {
    $.ajax({
      url: '/someurl',
      dataType: 'json',
      cache: false,
      type: 'GET',
      success: function(data) {
        this.setState({list: data});
      }.bind(this),
      error: function(xhr, status, err) {
        console.error('url', status, err.toString());
      }.bind(this)
    })
  },
  render: function() {
    return (
        <div>
             {something}
        </div>
    )
  }
})
ReactDOM.render(<firstAJAX />,
  document.getElementById('div')
);
var secondAJAX = React.createClass({
   //similar code with different url from firstAJAX
});

我想用ajax的结果处理多个文档元素。如何使发送1个ajax->渲染->发送1个ajax->渲染->变成发送多个ajax->render->render

假设在var secondAJAX = ...声明之后添加以下代码，则第二个ajax调用将在第一个调用之后进行。

ReactDOM.render(<secondAJAX />,
  document.getElementById('div')
);

我不知道你希望这个问题能实现什么，但你可能不想这样做。

我认为您的方法是使用容器组件模式。在这种情况下，您可以为firstAJAX&容器中的secondAJAX，并根据需要定义子元素的行为

相关文章：