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

Question

我已经实现了一个 cacheService，它具有方法 get(url)，它从 HTTP 获取值，将其放入 localStorage 和 returns $q promise。在下一个 .get(url) 运行中，它从 localStorage 获取值，并且 returns 它用 $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;
    });
}

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

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

第一次运行时，它没有在 localStorage 中找到缓存值并发出 HTTP 请求
在第一次运行之后第二次，第一个 HTTP 请求还没有完成，它的结果值还没有被缓存。所以我的方法第二次发出 HTTP 请求。

而且我不喜欢它。

所以问题是：

如何将 url 的请求同步为每个 url 只有 1 个请求？

更新：我有个主意：

定义var currentRequests = {};
如果 localStorage 有缓存值，return 一个
如果 currentRequests[url] 为空，执行请求并设置 currentRequests[url] = $http.get(url) - 将承诺存储在
如果 currentRequsts[url] 不为空，则此请求现在运行ning，然后只是 return currentRequests[url];

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

你怎么看？

Answer 1

这可能不是很好的解决方案。不过你可以试试看。

我建议你维护 promise 数组。

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.   
}

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

How to synchronise HTTP requests in angular application?

javascript

angularjs

angular-promise