在 Angularjs 服务中为来自 return 对象引用的 http 请求提供的数据构建简单的缓存

Question

我想在 Angularjs 服务中为 http 请求提供的数据构建一些简单的缓存。另外，我希望始终获得对同一对象的引用。我准备了示例代码来说明我现在的想法和问题。

我有服务 UsersModel 为我提供来自 http 的用户 request.This 用户数据在控制器之间共享。所以想要始终引用相同的数据。我给他加了简单的逻辑。在 UsersModel.getUsers() 调用服务之前检查是否存在来自上次调用的任何数据，如果存在 return 他，如果不存在则执行 http 请求。我在树控制器中注入该服务。在前两个控制器中 UsersModel.getUsers() 在页面加载后立即调用。最后点击按钮后。问题是当两个第一个控制器同时调用 UsersModel.getUsers() 时。然后任何缓存数据都不存在并且都做http请求之后我在前两个控制器中引用了不同的用户对象。我们可以看到这个点击加载按钮。

现在是我的问题。如何使这项工作适用于同时首次调用 UsersModel.getUsers() 并始终引用相同的对象数据。

app.js

var APP = angular.module('APP', []);
APP.SidebarCtrl = function ($scope, UsersModel) {
    var sidebarCtrl = this;

    UsersModel.getUsers()
        .then(function (users) {
            sidebarCtrl.users = users;
        });
};
APP.ContentCtrl = function ($scope, UsersModel) {
    var contentCtrl = this;

    UsersModel.getUsers()
        .then(function (users) {
            contentCtrl.users = users;
        });
};
APP.FootCtrl = function ($scope, UsersModel) {
    var footCtrl = this;

    function load() {
        UsersModel.getUsers()
            .then(function (users) {
                footCtrl.users = users;
            });
    }

    footCtrl.load = load 
};

APP.service('UsersModel', function ($http, $q) {
    var model = this,
        URLS = {
            FETCH: 'http://api.randomuser.me/'
        },
        users;

    function extract(result) {
        return result.data.results['0'].user.email;
    }

    function cacheUsers(result) {
        users = extract(result);
        return users;
    }

    model.getUsers = function () {
        return (users) ? $q.when(users) : $http.get(URLS.FETCH).then(cacheUsers);
    };
});

Index.html

<div ng-app="APP">
    <div ng-controller="APP.SidebarCtrl as sidebarCtrl">
        <h1>{{ sidebarCtrl.users }}</h1>
    </div>
    <div ng-controller="APP.ContentCtrl as contentCtrl">
        <h1>{{ contentCtrl.users }}</h1>
    </div>
    <div ng-controller="APP.FootCtrl as footCtrl">
        <h1>{{ footCtrl.users }}</h1>
         <button ng-click="footCtrl.load()" type="button">Load</button> 
    </div>
</div>

jsfiddle code illustrate problem

Answer 1

您可以修改您的函数如下：

function cacheUsers(result) {
    return (users) ? users : users = extract(result); 
}

和

model.getUsers = function () { 
    return (users) ? $q.when(users) : $http.get(URLS.FETCH, {cache: true}).then(cacheUsers); 
};

它在提取后提供额外的缓存检查并为对象启用内置缓存。

我建议你阅读http://www.webdeveasy.com/angularjs-data-model/

在 Angularjs 服务中为来自 return 对象引用的 http 请求提供的数据构建简单的缓存

Build simple cache in Angularjs service for data provide from http request which return object reference

javascript

caching

angularjs