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調用完成

回答

相關問題