如何处理调用同一函数的多个 Ajax 调用？

Question

您好，页面上有 4 个指令，所有指令都需要用户列表。用户列表存储在需要 hhtp 请求的数据库中。由于 4 个指令同时出现在页面上，因此已将 4 个不同的 ajax 调用发送到服务器以获得类似的响应。

然后响应被缓存。

如何才能让所有 4 个指令都收到其用户列表并且只有一个 ajax 被发送到服务器。

Code Inside Directive(self is this) (ajaxCallService is service)

ajaxCallService.getUser(function(response) {
                self.users = response;
                //Next operations
});

ajaxCallService服务

Variable
var userList = []

Method
if (!userList.length) {
          $http.post({
                url: #,
                data:#
            })
            .then(
                function(response) {
                        userList = response.allMembers;
                        callback && callback(userList);
                }
            );
        }else{
            callback && callback(userList);
        }

我怎样才能阻止 4 个 ajax 调用并且只进行 1 个调用并让其他 3 个等待响应并将响应传回？

Answer 1

你可以为此使用 promises，看看它是否已经运行。因为服务在 angular 中是单例的，所以你知道它总是一个共享实例：

var userList = [];
var promise;

function getUser() {
    // inject the $q service
    var deferred = $q.defer();

    if (userList.length) {
        // already got data, immediately resolve that one
        deferred.resolve(userList);
    }

    if (promise) {
        // a promise is already working on it, return this one
        return promise;
    } else {
        $http.post(...).success(function(response) {
            userList = response;
            deferred.resolve(response);
        });
    }

    // if this point is reached, this is the first call
    // assign the promise so other calls can know this one is working on it
    promise = deferred.promise;
    return promise;
}

如何处理调用同一函数的多个 Ajax 调用？

How to Handle multiple Ajax call calling same function?

javascript

angularjs

angularjs-directive

angularjs-service

angular-http