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

How can we read multiple json files one after one using jquery

本文关键字：一个 读取 json 文件 何使用 我们 jquery      更新时间：2023-09-26

我们可以使用 jQuery.get（） 方法一个接一个地读取多个 JSON 文件吗？否则有任何可能的方法可以一个接一个地读取多个 JSON 文件

使用 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 响应，或者您可以将 url1 和 url2 替换为服务器上的 JSON 文件名

我们不需要 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();

这应该有效。它使用 fetch api 和承诺。这是演示链接。这将逐个下载。您可以使用 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');
  });
}
相关文章：