避免并发的重复请求 for Angular

发布时间:2019-06-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了避免并发的重复请求 for Angular脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

在项目的实际开发中偶然遇到了相同的GET请求被连续触发的问题,典型用例如CMS系统首页打开时导航栏需要加载栏目数据,页面中的栏目列表也同样请求该数据。当然,理想状态下可以要求导航栏先加载并缓存,然后其它组件从缓存中获取,然而实际上这些功能可能由不同的开发者编写,那么协调起来就麻烦一些了。而且越复杂的系统就更容易的出现这个问题,所以不得不解决一下了。
最初遇到这个问题是在一个AngularJS(AngularJS1.6测试通过)项目中,所以先丢这个出来:

/**
 * 这只是一个简单的例子,请自行扩展。
 * 返回的值总是一个promise,这样就默默的拦截了重复的请求
 * 注意:这里使用了本地缓存,这可能造成数据无法更新,
 * 而下一个例子则仅仅是过滤掉一个请求周期之内重复的请求
 */
function get(url) {
    VAR defer = $q.defer();
    if (localStage.getITem('cachedRequest-' + url) !== null) {
        if (localStage.getItem('cachedRequest-' + url).then) {
            //then方法不是undefined那么这就是个PRomise对象,扔回去
            return localStage.getItem('cachedRequest-' + url);
        } else {
            //数据已经本地缓存了那就放到defer里面返回
            defer.resolve(JSON.parse(localStage.getItem('cachedRequest-' + url)));
        }
    } else {
        //不好解释,要打太多字...明白就好
        var promise = $http.get(url).then(function(res){
            localStage.setItem('cachedRequest-' + url, JSON.stringify(res));
            return defer.resolve(res);
        });
        defer.resolve(promise);
    }
    return defer.promise();
}

Angular版本 (Angular6测试通过)