如何通过Javascript或JQuery异步获取许多JSON

Question

我想通过Javascript或JQuery获得许多JSON，并将名为j_name，j_value和j_sts的元素分别拉到sarr [i]，rarr [i]和parr [i]中。

var sarr = new Object;
var rarr = new Object;
var parr = new Object;

//num_json is the number of JSONs
//jsonurl is a url of the JSON
for(var i = 1; i < num_json; i++){
$.ajaxSetup({async: false});
  $.getJSON(jsonurl[i], function(data) {
    sarr[i] = data.j_name;
    rarr[i] = data.j_value;
    parr[i] = data.j_sts;
  });
$.ajaxSetup({async: true});
}

没有

$ .ajaxSetup（{async：false}）;

和

$ .ajaxSetup（{async：true}）;

，则异步处理会导致sarr [i]，rarr [i]和parr [i]被当前加载的JSON元素填充。 我必须停止异步加载。 但是，此过程显示页面非常慢。

我想按照以下说明将存储JSON的对象“数据”分开，但这显然是无效的。

var sarr = new Object;
var rarr = new Object;
var parr = new Object;
var data = new Object;

for(var i = 1; i < num_json; i++){
  $.getJSON(jsonurl[i], function(data[i]) {
    sarr[i] = data[i].j_name;
    rarr[i] = data[i].j_value;
    parr[i] = data[i].j_sts;
  });
}

如何才能异步加载许多JSON并存储每个特定元素？

Answer 1

这是一种方法

const urls = [];

const responses = urls.map( url => fetch(url).then(res => res.json()) );
Promise.all(responses)
    .then( dataArr => {

        return dataArr.reduce((res, data) => {
            res.sarr[i] = data[i].j_name;
            res.rarr[i] = data[i].j_value;
            res.parr[i] = data[i].j_sts;
            return res;
        }, { sarr: [], rarr: [], parr: [] });

    } )
.then(result => {

    const { sarr, rarr, parr } = result;

});

该解决方案使用fetch API和Promises。 基本上，它的作用是：给定URL数组，对每个URL发出请求，并将结果作为json检索，并将结果存储在Promises数组中。 有了这样的承诺，一旦所有要求都解决了，则当且仅当所有请求都成功时，才检索结果。 如果成功，则将每个值存储在正确的数组中并返回。