如果你使用本地文件，为什么不把数据打包成一个js对象呢?

data.js

MyData = { resource:"A",literals:["B","C","D"]}

没有xmlhttprequest，没有解析，只使用MyData。资源直接

我已经阅读了上面的内容，并注意到通常在项目中有人想要加载多个json文件。在某些情况下是大量的，在某些情况下是“json文件目录”(否则你必须首先生成一个列表才能下载它们)。如果整个项目都是这样，就会变得很混乱。如果json文件中的数据之间有很多关系，这可能会很麻烦。

显然，这都可以用上面的方法来完成，要么把它们做成.js文件，要么通过某种本地抓取来检索它们。

然而，我发现一个有用的替代方案(如果你不想要一个有层次的服务器端解决方案)是首先在Sql Lite数据库中加载你所有的数据。这使得管理更多的数据也更容易一些，你只有一个文件，所有的数据等等。

然后使用web程序集加载sqlite数据库，然后使用常规查询查询数据客户端。这些都可以在客户端完成

下面是一个例子:https://github.com/projectje/bookmarks-sync-sql-cogmios/blob/master/src/html/index.ts(被编译到客户端解决方案的typescript文件)。

在读/写站点中，你可以为每个用户提供一个sqlite数据库，这样你缓存的数据对于该用户是唯一的，等等。

裁判:https://github.com/sql-js/sql.js

如果你使用本地文件，为什么不把数据打包成一个js对象呢?

data.js

MyData = { resource:"A",literals:["B","C","D"]}

没有xmlhttprequest，没有解析，只使用MyData。资源直接

我接受了斯塔诺精彩的回答，并把它包装成一个承诺。如果你没有像node或webpack这样的选项来从文件系统加载json文件，这可能会很有用:

// wrapped XMLHttpRequest in a promise
const readFileP = (file, options = {method:'get'}) => 
  new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.onload = resolve;
    request.onerror = reject;
    request.overrideMimeType("application/json");
    request.open(options.method, file, true);
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === "200") {
            resolve(request.responseText);
        }
    };
    request.send(null);
});

你可以这样调用它:

readFileP('<path to file>')
    .then(d => {
      '<do something with the response data in d.srcElement.response>'
    });

你可以像ES6模块一样导入它;

import data from "/Users/Documents/workspace/test.json"

我喜欢上面Stano/Meetar的评论。我用它来读取.json文件。 我使用Promise扩展了他们的例子。 这是同样的活塞。 https://plnkr.co/edit/PaNhe1XizWZ7C0r3ZVQx?p=preview

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//usage:
// readTextFile("DATA.json", function(text){
//     var data = JSON.parse(text);
//     console.log(data); 
// });


var task1 = function (){
  return new Promise (function(resolve, reject){
    readTextFile("DATA.json", function(text){
    var data = JSON.parse(text);
    console.log('task1 called');
    console.log(data);
    resolve('task1 came back');
    }); 
  });
};

var task2 = function (){
  return new Promise (function(resolve, reject){
    readTextFile("DATA2.json", function(text){
    var data2 = JSON.parse(text);
    console.log('task2 called');
    console.log(data2);
    resolve('task2 came back');
    });
  });
}

Promise.race([task1(), task2()])
       .then(function(fromResolve){
          console.log(fromResolve); 
       });

JSON的读取可以移动到另一个函数，对于DRY;但这里的例子更多的是展示如何使用承诺。