多个 Ajax 请求的结果，一个取决于其他 Ajax 输出

Question

我正在 Perl Catalyst 上开发一个 Web 应用程序并使用 ReactJS 作为视图，jQuery 作为 AJAX，并将 JSX 作为脚本添加到 header。

我能够在页面上获取 AJAX JSON 数据并每 10 秒刷新一次数据。我们发现我们在服务器上加载时创建的这个选项每 10 秒获取一次数据。该应用程序将由多个用户一起使用，因此我们自动生成一个密钥，如果该数据库上的任何数据更新，该密钥将递增 table。我们在rest上设置这个key，可以通过AJAX JSON.

访问

我想实现一个 React 组件，它将检查这个自动生成的 AJAX JSON 键，并每 10 秒将其与之前的值进行比较。如果它们不相等，那么它将调用另一个 AJAX 函数或 React 组件来更新视图页面上的数据，旧值将被新值替换。

我搜索了很多但没有得到在 ReactJS 中实现它的逻辑。任何逻辑或参考 link 都会有所帮助。

Answer 1

将 "Refresh_token" 组件视为您的控制器。它将处理所有检查令牌并在令牌更改时获取新订单。 "Order list" 不应该知道令牌何时更改，它的工作是在新列表到达时重新呈现其视图。

//Section 1 Starts Here
var Orderlist = React.createClass({
 render: function(){
        var orderlist11 = [];
        for(var i = 0; i < this.props.list.length; i++){
         var orderItem = this.props.list[i];
         orderlist11.push(
          <div className="card">
           <div className="title">
            Order Number {orderItem.ordernumber} 
           </div>
           <div className="content"> 
            Date & Time : {orderItem.bizorderdate} <br />
             Username : {orderItem.userid}
           </div>
                </div>
            );
  }
        return (
            <div> {orderlist11} </div>
        );
  }
});
 
////// Section 1 ends here
 
 
var RefreshToken = React.createClass({
  
    getInitialState : function(){
        return {
            token : -1 , //Or anything that is not a token.
            orderlist : []
        }                      
    },

    refreshTimer : null,
    componentDidMount : function(){
     this.get_order_list(); //Get the intial order list
        this.refreshTimer = setInterval(this.refresh_token, 10000); //Call to check the new token every 10s
    },
     
    refresh_token : function(){
        $.ajax({
            type: 'GET',
            url: "/order/refresh",
            headers: {
                Accept : "application/json","Content-Type": "application/json"
            },
            success: function (resp){
             var newToken = resp;
             console.log(newToken); //it give the value of refresh eg. ["20150925313"] //Assume this will give the new value of the order list changed.
                if(newToken != this.state.token){
                    this.setState({ token: newToken});
                    this.get_order_list() //Get the new list when token has changed.
            //      console.log(this.state.resp);
                } 
            }.bind(this)
        });
    },

    get_order_list : function(){
        $.ajax({
            type: 'GET',
            url: "/order/list/10/1",
            headers: {
            Accept : "application/json", "Content-Type": "application/json"
            },
            success: function(orderlist) {
             //      console.log(orderlist);
             //      console.log(this.state.orderlist);
             this.setState({orderlist: orderlist});
            }.bind(this),
            error: function(xhr, status, err) {
         }
        });
    },

    render: function(){
     return <Orderlist list={this.state.orderlist} />
    }
});
 
React.render(
  <RefreshToken  />,
  document.getElementById('list_of_orders')
);

多个 Ajax 请求的结果，一个取决于其他 Ajax 输出

Result of Multiple Ajax requests, one depends on other Ajax Output

javascript

perl

catalyst

reactjs