ReactJS：在.jax（）语句之后执行代码，并在其中调用ajax调用完成

我被困在了我的抽搐电视API应用程序freecodecamp的问题。ReactJS：在.jax（）语句之后执行代码，并在其中调用ajax调用完成

我有一个.map（）语句，里面有一个ajax调用。我将从调用中获得的数据推送到数组中。

我想整个.MAP（）循环结束后，应用程序的状态设置为阵，但不知何故数组总是空的，当我访问它外面.MAP（）的

这里是我试过的代码。

getData() { 
    let tempArray= []; 
    let self = this; 
    STREAMER.map(function(streamer, i) { 
    $.ajax({ 
     url: URL + streamer, 
     success: (data) => { 
     tempArray.push(data); 
     }, 
     dataType: "jsonp" 
    }) 
    }); 
    this.setState({data: tempArray}); 
}

我感觉问题是ajax调用是异步obv。但我认为，因为我调用.map（）循环之外的this.setState（）方法，它应该是同步的，一切都应该很好，但不是。

Ajax调用不是问题btw。如果我在成功方法内记录数据，所有事情都是我喜欢的。

任何想法？

来源

2016-04-24 rasmus1610

简化算法

的setState()功能应该异步Ajax请求的成功回调内部调用。

getData() { 
    let tempArray= []; 
    let self = this; 
    STREAMER.map(function(streamer, i) { 
    $.ajax({ 
     url: URL + streamer, 
     success: (data) => { 
     tempArray.push(data); 
     if(i === STREAMER.length - 1) { 
      self.setState({data: tempArray}); 
     } 
     }, 
     dataType: "jsonp" 
    }) 
    }); 
}

使用PROMISE

当所有Ajax请求都成功，解决内部resolve()的Promise和setState。

来源

2016-04-24 14:55:19

不能保证最后一次ajax调用实际上是最后一次完成。 – Pointy

更改的代码按照推送实施。所有ajaxRequests成功后，setState将被调用。 –

当对应于原始数组中的最后一个元素的调用回调函数，在那个特定的HTTP请求的结论，它会被调用。那时候，一个或多个其他HTTP请求可能还没有完成。不过，这也意味着“temp”数组中的响应顺序不一定与原始数组的顺序一致。 – Pointy

使用您的.map()调用返回所有$.ajax()调用中的承诺。然后，您可以使用$.when()等待它们完成：

getData() { 
    let tempArray= []; 
    let self = this; 
    $.when.apply($, STREAMER.map(function(streamer, i) { 
    return $.ajax({ 
     url: URL + streamer, 
     success: (data) => { 
     tempArray.push(data); 
     }, 
     dataType: "jsonp" 
    }) 
    }).then(function() {} 
    self.setState({data: tempArray}); 
    }); 
}

返回的承诺将由.map()被收集到一个数组。返回的数组然后通过.apply()传递到$.when()。这将管理等待所有的承诺，并且当他们完成时，你的回调将被调用。

如果这是可能的话，我建议你考虑做在服务器迭代工作，并提供一个单一的HTTP API，它处理一组项目，并返回聚合结果的可能性。 HTTP请求需要时间，浏览器只能同时处理其中的一部分。特别是这种方法的一个问题是“temp”数组的顺序不一定与原始数组的顺序相匹配。也就是说，当过程完成时，tempArray[2]可能包含或不包含STREAMER[2]的ajax调用的结果。不能保证HTTP请求将按照它们发布的顺序完成;事实上，如果你做的不仅仅是几个，那么他们很可能会不按顺序完成。

来源

2016-04-24 14:59:46 Pointy

哦，http请求可能失序的事实际上使我的整个设计模式变得糟糕：D，所以我应该考虑设计不同的应用程序。不过，我还是谢谢你的回答不幸的是我不负责抽搐的API设计;） – rasmus1610

@ rasmus1610很好，你可以通过按不只是响应数据，而且使原来的指标值确定的事情了。然后，您可以对结果数组进行传递并重新排序。 – Pointy

我正在考虑在单个项目的基础上进行ajax调用，这个项目是我想要为单个流器显示的。但是，当我想要过滤拖缆列表时，这会遇到一些问题。 – rasmus1610

ReactJS：在.jax（）语句之后执行代码，并在其中调用ajax调用完成

回答

相关问题