Question

我们可以使用jQuery.get（）方法一个接一个地读取多个json文件吗？或者任何可能的方法是一个接一个地读取多个json文件

Answer 1

使用 Jquery.when

 var a=$.get(url1);
 var b=$.get(url2);
 $.when(a,b).done(function(aResult,bResult)
 {
   console.log(aResult[0]+"   "+bResult[0]);

  }

这里url1和url2返回JSON响应，或者你可以用服务器上的JSON文件名替换url1和url2

Answer 2

这应该有效。它使用fetch api和promises。 Here is the demo link. 这将逐个下载。如果并发下载没问题，您可以使用Promise.all并简化此代码。

var files = [
  'https://rawgit.com/blessenm/ng-app-kit/master/app/config/dev.json',
  'https://rawgit.com/blessenm/ng-app-kit/master/app/config/prod.json'
];

function fetchFiles(files) {
  var promise = Promise.resolve();

  files.forEach((file) => {
    promise = promise
                .then(() => fetch(file))
                .then(response => response.json());
  });

  return promise;
}

function startFetching() {
  fetchFiles(files).then(function(result) {
    //Here fetching is complete

    alert(JSON.stringify(result)); // Final json file
    alert('Complete');
  });
}

Answer 3

我们不需要仅使用jQuery的普通JavaScript （ES6 / ES2019）

纯功能基于承诺的fetchAll（）

它看起来很复杂，但确实很简单。

    const fetchAll = files => new Promise((resolve, reject) =>
        Promise.all(Object.values(files).map(file => fetch(file)))
               .then(responses =>
                      Promise.all(responses.map(r => r.json()))
                             .then(jsons =>
                                 resolve(Object.keys(files).reduce((prev, curr, index) =>
                                     !(prev[curr] = jsons[index]) || prev, {}))
                             ))
               .catch(err => reject(err))
    );

使用

    fetchAll({
        example1: 'http://domainxxxxxxx.com/example1.json',
        example2: 'http://domainxxxxxxx.com/example2.json',
    }).then(jsons => {
        console.log(jsons)  // <-- Result here
    }).catch(err => {
        console.error(err.message);
    });

或现代的异步/等待方式

    const main = async () => {
        const [example1, example2] = await fetchAll({
            example1: 'http://domainxxxxxxx.com/example1.json',
            example2: 'http://domainxxxxxxx.com/example2.json',
        });
        console.log(example1, example2);        
    } 
    main();

我们如何使用jquery一个接一个地读取多个json文件

3 个答案: