时间戳

首页 > 解决方案 > 当所有 json 数据都经过循环时如何运行 then()

javascript - 当所有 json 数据都经过循环时如何运行 then()

问题描述

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

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()没有按时运行。

这是我正在寻找的结构：

  1. 解析 JSON 文件 1。parseRadioList()
  2. JSON1 是一个包含多个 JSON URL 条目的数组。
  3. 遍历 JSON1 数组中的 URL 并getJSON为每个 URL 执行。parseEachRadioData(radioList_data)&ParseEachHistoryData(radioList_data)
  4. 将每个 JSON 的数据推送到一个通用 Array 中。
  5. 完成后，解析 JSON2_parseiTunes()

任何想法如何使此代码以正确的结构运行。

提前致谢。

标签： javascriptjqueryjsonpromisegetjson

解决方案

首先，parseEachRadioData根本ParseEachHistoryData不返回任何东西，更不用说 Promise - 所以不可能等待它们

此外，您过度使用 $.when ...实际上您永远不需要使用它，只需使用常规承诺，因为 jQuery $.getJSON 等返回一个可用的类似 Promise 的对象

即你的代码可能是

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=?")));
}

推荐阅读