当所有json数据通过循环时如何运行then() [英] How to run then() when all json data gone through the loop

问题描述

在我的代码中，我处理了多个需要按顺序解析的JSON请求.

In my code I deal with multiple JSON requests that need to be parsed in an order.

let allRadio_data, allHistory_data, iTunes_data;


$.when(parseRadioList())
  .then(function(list) {
    radioList_data = list;

    return $.when(
    parseEachRadioData(radioList_data), 
    ParseEachHistoryData(radioList_data)
    );

  })
  .then(function() {
    console.log(allRadio_data);
    console.log(allHistory_data);

    return $.when(_parseiTunes());
  })
  .then(function(iTunesInfo) {
    iTunes_data = iTunesInfo;

    return _cacheOptions();
  })

function _cacheOptions() {
  // FINAL function
}


/////////
function parseRadioList() {
  return $.getJSON("https://api.myjson.com/bins/xiyvr");
}

function _parseiTunes() {
  return $.getJSON("https://itunes.apple.com/search?term=jackson&limit=10&callback=?")
}

function parseEachRadioData(radioList) {
  allRadio_data = [];
  $.each(radioList, function(index, radio) {
    $.when($.getJSON(radio.url + "/stats?sid=" + radio.stream_id + "&json=1&callback=?"))
      .then(function(data) {
        allRadio_data.push(data);
      });
  })
}

function ParseEachHistoryData(radioList) {
  allHistory_data = [];
  $.each(radioList, function(index, radio) {
    $.when($.getJSON(radio.url + "/played?sid=" + radio.stream_id + "&type=json&callback=?"))
      .then(function(data) {
        allHistory_data.push(data);
      });
  })
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

现在代码正在运行，但我在console.log(allRadio_data);的地方为空.但是，如果我执行settimeout()使其延迟一秒钟，则数据已完成.这意味着then()不能按时运行.

Right now the code is running, but where I do console.log(allRadio_data); it is empty. However, if I do settimeout() to delay it for a second the data is completed. This means then() is not running on time.

这是我正在寻找的结构:

This is the structure I am looking for:

1. 已解析JSON文件1. parseRadioList()
2. JSON1是JSON URLS的多个条目的数组.
3. 遍历JSON1数组中的URL，并对每个URL进行getJSON. parseEachRadioData(radioList_data)& ParseEachHistoryData(radioList_data)
4. 将每个JSON的数据推送到一个通用数组中.
5. 完成后，解析JSON2 _parseiTunes()

1. JSON file 1 is parsed. parseRadioList()
2. JSON1 is an array of multiple entries of JSON URLS.
3. Run through the URLs within JSON1 array and do getJSON for each. parseEachRadioData(radioList_data) & ParseEachHistoryData(radioList_data)
4. Push data of each JSON in one general Array.
5. Once completed, parse JSON2 _parseiTunes()

任何想法如何使此代码在正确的结构中运行.

Any Idea how to make this code running in the right structure.

先谢谢了.

推荐答案

首先，parseEachRadioData和ParseEachHistoryData根本不会返回任何东西，更不用说一个Promise了，因此不可能等待它们

For a start, parseEachRadioData and ParseEachHistoryData don't return anything at all, let alone a Promise - so it's impossible to wait on them

此外，您在$ .when时过度使用了...实际上，您根本不需要使用它，只需使用常规的Promise，因为jQuery $ .getJSON等会返回可用的类似于Promise的对象

Also, you're overusing $.when ... in fact you never need to use it, just use regular promises since jQuery $.getJSON etc return a usable Promise-like object

即您的代码可能是

let allRadio_data, allHistory_data, iTunes_data;


parseRadioList()
.then(function(list) {
    radioList_data = list;
    return Promise.all([
        parseEachRadioData(radioList_data), 
        ParseEachHistoryData(radioList_data)
    ]);

})
.then(function(result) {
    allRadio_data = result[0];
    allHistory_data = result[1];
    console.log(allRadio_data);
    console.log(allHistory_data);
    return _parseiTunes();
})
.then(function(iTunesInfo) {
    iTunes_data = iTunesInfo;
    return _cacheOptions();
})

function _cacheOptions() {
  // FINAL function
}


/////////
function parseRadioList() {
    return $.getJSON("https://api.myjson.com/bins/xiyvr");
}

function _parseiTunes() {
    return $.getJSON("https://itunes.apple.com/search?term=jackson&limit=10&callback=?")
}

function parseEachRadioData(radioList) {
    return Promise.all(radioList.map(radio => $.getJSON(radio.url + "/stats?sid=" + radio.stream_id + "&json=1&callback=?")));
}

function ParseEachHistoryData(radioList) {
    return Promise.all(radioList.map(radio => $.getJSON(radio.url + "/played?sid=" + radio.stream_id + "&type=json&callback=?")));
}

这篇关于当所有json数据通过循环时如何运行then()的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！