Javascript 如何在每次下载时一个接一个地获取JSON文件

Javascript 如何在每次下载时一个接一个地获取JSON文件,javascript,jquery,json,async-await,getjson,Javascript,Jquery,Json,Async Await,Getjson,我想先编写一个插件 它加载2个json文件,将每个文件保存在一个变量中 然后再加载2个json文件并将其保存在变量中 然后运行另一个函数 前一个步骤完成后,需要完成这三个步骤。主要原因是从上一步获取的信息将用于下一步 我有这个代码,但不是我想要的工作方式 $.when(parseJSON1(), parseJSON2()) .then( parseJSON3(station_data.dj), parseJSON4(station_data.songurl) ) .then

我想先编写一个插件

  • 它加载2个json文件,将每个文件保存在一个变量中
  • 然后再加载2个json文件并将其保存在变量中
  • 然后运行另一个函数
  • 前一个步骤完成后,需要完成这三个步骤。主要原因是从上一步获取的信息将用于下一步

    我有这个代码,但不是我想要的工作方式

     $.when(parseJSON1(), parseJSON2())
      .then(
        parseJSON3(station_data.dj), parseJSON4(station_data.songurl)
      )
      .then(
        _cacheOptions
      )
    
      });
    
      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];
      }
    
      // 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);
      }
    
    根据its,.then()方法将其参数中的两个回调分别视为在成功或失败/错误时调用的函数。从当前编写代码的方式来看,您似乎在告诉它:

    • 获取JSON1和JSON2
    • 如果这两个调用成功解决,则获取JSON3
    • 如果其中一个调用失败,则获取JSON4
    • 然后调用缓存选项
    除此之外,似乎还有其他一些问题:

    • .when()子句中获取的数据没有传递给需要第一步信息的两个回调
    • _cacheOptions函数正在引用未定义的变量stationInfo、stationHistory、itunesInfo和coverInfo
    假设这四个变量是parseJSON1到ParseJSON4获取的数据,您可以将代码重写为:

    var stationInfo、stationHistory、itunesInfo、coverInfo;//存储返回的JSON数据
    var站点数据、历史数据、itunes数据、封面数据;//由_cacheOptions设置
    //等待getjson解析
    $.when(parseJSON1(),parseJSON2())
    //在下一步中使用解析数据
    .then(函数(JSON1、JSON2){
    //设置作用域变量
    stationInfo=JSON1;
    stationHistory=JSON2;
    //然后调用接下来的两个异步回迁
    //注意,由于您已经使用返回的数据设置了本地变量,
    //您不需要向这些函数传递任何信息,它们只需
    //参考类似于_cachOptions函数的信息
    返回$.when(parseJSON3(),parseJSON4());
    })
    .then(函数(JSON3、JSON4){
    //设置作用域变量
    itunesInfo=JSON3;
    coverInfo=JSON4;
    返回_cacheOptions();
    })
    //核心功能
    函数_cacheOptions(){
    station_data=stationInfo[0];
    历史数据=站点历史[0];
    itunes_data=itunesInfo[0];
    coverList_data=coverInfo[0];
    
    }
    感谢您的回复。很好的解决方案。只有一个问题。能否告诉我这条链条如何继续?我的意思是有多个函数必须在
    \u cacheOptions
    之后运行。对于我的初始代码,我尝试对每个代码使用
    then()
    。例如:
    。然后(\u cacheOptions)。然后(\u cacheDom)。然后(\u events)。然后(\u render)。因此,每个函数都会一个接一个地运行。是的,您可以使用.then()以这种方式链接任意多个回调。您还可以检查异步函数,它通常允许您使用更清晰的代码执行相同的操作。(见或)