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

Question

我已经实现了一个cacheService，它具有方法get(url)，它从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;
    });
}

下面是我的方法不起作用的情况 - 它发出超过 1 个 HTTP 请求。

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

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

我不喜欢它。

所以问题是:

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

更新: 我有一个想法:

• 定义var currentRequests = {};
• 如果 localStorage 有缓存值，则返回该值
• 如果 currentRequests[url] 为空，则执行请求并设置 currentRequests[url] = $http.get(url) - 将 promise 存储在
• 如果currentRequsts[url]不为空，则该请求正在运行，则返回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.   
}