如何在Angular应用程序中同步HTTP请求？

Mikhail Kopylov 发表于 Dev

米哈伊尔·科皮洛夫（Mikhail Kopylov）

我已经实现了具有方法get（url）的cacheService，该方法从HTTP获取值，将其放入localStorage并返回$ q promise。在下一个.get（url）运行时，它从localStorage获取值，并返回用$ q包裹的值。

function get(url){
    var saved = JSON.parse(localStorage.getItem(url));
    if (angular.isObject(saved)){
        return $q.when(saved);
    }
    return $http.get(url).then(function(xhr){
        localStorage.setItem(url, JSON.stringify(xhr.data));
        return xhr.data;
    });
}

这是我的方法不起作用的情况-它发出多个HTTP请求。

如果我两次调用cacheService.get（url）（例如从不同的模块）：

第一次运行时，在localStorage中找不到缓存值并发出HTTP请求
当它在第一个请求之后第二次运行时，第一个HTTP请求尚未完成，其结果值尚未缓存。所以我的方法使HTTP请求第二次。

而且我不喜欢它。

所以问题是：

如何通过url同步请求以使每个url仅具有1个请求？

UPD：我有个主意：

定义 var currentRequests = {};
如果localStorage具有缓存的值，则返回1
如果currentRequests[url]为空，则执行请求并设置currentRequests[url] = $http.get(url)-将诺言存储在
如果currentRequsts[url]不为空，则此请求正在运行，然后return currentRequests[url]；

由于JS在浏览器的单个线程中运行，因此currentRequests是线程安全的。但这不在nodejs中。正确的？

你怎么看待这件事？

港区

这可能不是一个好的解决方案。但您可以尝试一下。

我建议您保持承诺。

var promiseArr = [];
function get(url){
    var saved = JSON.parse(localStorage.getItem(url));
    if (angular.isObject(saved)){
        return $q.when(saved);
    }
    //check if $http request for the url has a pending promise.
    if(!promiseArr.hasOwnProperty(url)){          
      promiseArr[url] = $http.get(url).then(function(xhr){
          localStorage.setItem(url, JSON.stringify(xhr.data));
          delete promiseArr[url]; //Delete the promise once resolved.. please check.
          return xhr.data;
      });
    }
    return promiseArr[url]; //return the promise from the array.   
}