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

Question

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

然后响应就会被缓存。

如何让所有 4 个指令都接收其用户列表，并且仅将一个 ajax 发送到服务器。

代码内部指令(self是这个)(ajaxCallService是服务)

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

您可以使用 Promise 来查看它是否已经在运行。因为服务在 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;
}