Question

在我的代码中，我想先加载2个JSON文件，然后根据它们的结果，运行另外两个JSON文件，然后运行一系列功能，例如render，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并保存其变量。然后运行其余的主要功能。

以上内容将是该插件的基础，我正在尝试使其结构保持结构化，以确保一切按顺序运行。

任何想法如何使其起作用？

Answer 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>

如何按顺序运行JSON文件和功能

1 个答案:

答案：

示例：