javascript - 如何通过 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 数组中。给定这一系列的 promise ，一旦所有的都解决了，当且仅当所有请求都成功时才检索结果。如果成功，则将每个值存储在正确的数组中并返回它。