如何使用 Angular 处理 JSON 文件加载

how to handle JSON file loading with Angular

本文关键字：文件 加载 JSON 处理 何使用 Angular      更新时间：2023-09-26

我有几个控制器可以从服务调用方法getData()。为了不对同一个 json 文件进行额外的 http 调用，我使用了这样的东西：

QuizApp.service('quizService', ['$http', function($http) {
    var quizService = {},
        quizData;
    quizService.getData = function() {
        return quizData ? quizData : quizData = $http.get('quiz.json');
    };
    return quizService;
}]);

。但是如果我这样做，事情就无法正常工作（数据用于用棱角光滑填充滑块和缩略图库，并且会出现一些问题。现在可能没关系，我只想知道上面的代码是否有意义）。

另一方面，如果我这样写getData()：

QuizApp.service('quizService', ['$http', function($http) {
    var quizService = {},
        quizData;
    quizService.getData = function() {
        quizData = $http.get('quiz.json');
        return quizData;
    };
    return quizService;
}]);

。这将对同一个 JSON 文件执行各种 http 请求（对我来说看起来不是一个好的做法），一切正常，光滑的角度画廊工作正常。但不是100%的时间：随机的事情也不能很好地工作（相同的症状。我可能会描述它们，但同样，我认为这不是这里的重点）

所以，一般来说，无论上下文如何，这些版本的getData()中哪一个看起来不错，哪个不好，为什么？

更新

正如Mark指出的那样，Angular有一个内置的缓存，但默认情况下它被设置为false。这是一篇文章，这是文档。

如果我缓存 http 请求的结果，尽管我遇到了同样的问题（我在这里没有描述它），我得到了第二个选项，这显然与此无关。

实际上，似乎如果我重复 http 请求两次（如我的第二段代码），事情就会偶然工作（90% 的时间？

因此，通过缓存结果，至少我得到了一致的结果，这意味着在这种情况下，光滑的角度将无法正常工作（永远不会），我必须在其他地方寻找解决方案。

Angular $http有一个内置的缓存，你可以在这里使用它。您可以缓存所有$http请求，这可能是一个坏主意，或者特定的请求。

在非常简单的层面上，这应该适合您

quizService.getData = function() {
  return $http.get('quiz.json', {cache: true}).then(quizData => {
    return quizData;
  });
};

您可以在 Angular 文档中找到更多信息$http

相关文章：