0

在我的代码中，我想先加载 2 个 JSON 文件，然后根据它们的结果，运行另外两个 JSON 文件，然后运行一系列函数，如渲染、DOM 等。我想将 JSON 数据保存在变量，以便稍后在代码中引用它们。

像这样的东西：

$.when(parseJSON1(), parseJSON2())
  .then(
    parseJSON3(station_data.dj), parseJSON4(station_data.songurl)
  )
  .then(
    _cacheOptions
  )
  .then(
    _cacheDom
  )
  .then(`enter code here`
    _events

  ).then(
    _render
  );

  });

  var station_data, history_data, itunes_data, coverList_data;

  // Core Functions

  function _cacheOptions() {
    station_data = stationInfo[0];
    history_data = stationHistory[0];
    itunes_data = itunesInfo[0];
    coverList_data = coverInfo[0];
  }

  function _cacheDom() {}

  function _events() {}

  function _render() {}

  // Functions

  function parseJSON1() {
    return $.getJSON(settings.JSON1);
  }

  function parseJSON2() {
    return $.getJSON(settings.JSON2);
  }

  function parseJSON3(searchTerm) {
    return $.getJSON(settings.JSON3);
  }

  function parseJSON4() {
    return $.getJSON(settings.JSON4);
  }

所以为了简单起见，我想运行 JSON1 和 JSON2，然后将其数据保存为变量，然后基于该数据运行 JSON3 和 JSON4 并保存它们的变量。然后运行其余的主要功能。

以上将是插件的支柱，我试图保持它非常结构化，一切都按顺序运行。

知道如何使它工作吗？

4

1 回答 1

1

回答：

您可以像以前一样$.when组合使用$.getJSON，但是最好将其包装到一个async函数中，这样您就不必担心这么多移动部件。

  • 为返回的 json 创建一个存储对象。
  • 获取前两个数据集
  • 将数据放入存储中
  • 检查前两个返回的数据集
  • 如果检查通过，则继续承诺链
  • $.when通过调用获取最后两个数据集
  • 将数据放入存储中
  • 退货商店
  • 之后通过使用做某事getAll().then(fn)
async function getAll() {
  let json_store = {},
    combine = (...locations) => locations.map($.getJSON),
    json_check = (first, second) => (first.userId && second.userId);

  await $.when(...combine(settings.JSON1, settings.JSON2)).then(function([first], [second]) {
    json_store = Object.assign(json_store, {
      first,
      second
    });

    if (json_check(first, second)) {
      return $.when(...combine(settings.JSON3, settings.JSON4)).then(function([third], [fourth]) {
        json_store = Object.assign(json_store, {
          third,
          fourth
        });
      });
    }
  })
  return json_store;
};

getAll().then(console.dir);

例子：

let settings = {
  JSON1: "https://jsonplaceholder.typicode.com/todos/1",
  JSON2: "https://jsonplaceholder.typicode.com/todos/2",
  JSON3: "https://jsonplaceholder.typicode.com/todos/3",
  JSON4: "https://jsonplaceholder.typicode.com/todos/4"
}


async function getAll() {
  let json_store = {},
    combine = (...locations) => locations.map($.getJSON),
    json_check = (first, second) => (first.userId && second.userId);

  await $.when(...combine(settings.JSON1, settings.JSON2)).then(function([first], [second]) {
    json_store = Object.assign(json_store, {
      first,
      second
    });

    if (json_check(first, second)) {
      return $.when(...combine(settings.JSON3, settings.JSON4)).then(function([third], [fourth]) {
        json_store = Object.assign(json_store, {
          third,
          fourth
        });
      });
    }
  })
  return json_store;
};

getAll().then(console.dir);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

于 2019-08-02T21:28:07.213 回答