Question

我想在Angularjs服务中构建一些简单的缓存，用于从http请求提供数据。另外我想要总是引用同一个对象。我准备示例代码来说明我现在的想法和问题。

我有服务UsersModel，它通过http请求向我提供用户。此用户数据在控制器之间共享。所以想要始终引用相同的数据。我给他添加了简单的逻辑。在UsersModel.getUsers()呼叫服务之前检查是否存在来自先前呼叫的任何数据，如果存在，则返回他，如果不进行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服务中构建简单缓存，以便从http请求中提供返回对象引用的数据

1 个答案: