缓存HTTP';获取';AngularJS中的服务响应?

缓存HTTP';获取';AngularJS中的服务响应?,angularjs,ajax,caching,http-get,Angularjs,Ajax,Caching,Http Get,我希望能够创建一个定制的AngularJS服务,当其数据对象为空时发出HTTP“Get”请求,并在成功时填充数据对象 下次调用此服务时,我希望绕过再次发出HTTP请求的开销,而是返回缓存的数据对象 这可能吗?角度的有一个。根据文件: 缓存–{boolean | Object}–使用$cacheFactory创建的布尔值或对象,用于启用或禁用HTTP响应的缓存。看见 布尔值 因此,您可以在其选项中将cache设置为true: $http.get(url, { cache: true}).succ

我希望能够创建一个定制的AngularJS服务,当其数据对象为空时发出HTTP“Get”请求,并在成功时填充数据对象

下次调用此服务时,我希望绕过再次发出HTTP请求的开销,而是返回缓存的数据对象

这可能吗?

角度的有一个。根据文件:

缓存–{boolean | Object}–使用$cacheFactory创建的布尔值或对象,用于启用或禁用HTTP响应的缓存。看见

布尔值 因此,您可以在其选项中将
cache
设置为true

$http.get(url, { cache: true}).success(...);
或者,如果您更喜欢调用的配置类型:

$http({ cache: true, url: url, method: 'GET'}).success(...);
缓存对象 您还可以使用缓存工厂:

var cache = $cacheFactory('myCache');

$http.get(url, { cache: cache })
您可以自己使用(特别是在使用$resource时):


在当前的稳定版本(1.0.6)中,一种更简单的方法需要更少的代码

设置模块后,请添加工厂:

var app = angular.module('myApp', []);
// Configure routes and controllers and views associated with them.
app.config(function ($routeProvider) {
    // route setups
});
app.factory('MyCache', function ($cacheFactory) {
    return $cacheFactory('myCache');
});
现在,您可以将其传递到控制器:

app.controller('MyController', function ($scope, $http, MyCache) {
    $http.get('fileInThisCase.json', { cache: MyCache }).success(function (data) {
        // stuff with results
    });
});

一个缺点是,密钥名称也会自动设置,这可能会使清除它们变得棘手。希望他们能以某种方式添加密钥名。

我认为现在有一种更简单的方法。这将为所有$http请求(由$resource继承)启用基本缓存:

如果您喜欢$http的内置缓存,但想要更多的控制,请查看库。您可以使用它无缝地增加$http缓存,包括生存时间、定期清除,以及将缓存持久化到本地存储的选项,以便跨会话可用

FWIW,它还提供了一些工具和模式,使您的缓存成为一种更动态的数据存储,您可以作为POJO进行交互,而不仅仅是默认的JSON字符串。目前还不能评论该选项的效用


(然后,最重要的是,相关库在某种程度上取代了$resource和/或Restangular,并且依赖于angular缓存。)

正如AngularJS工厂一样,您可以简单地存储http请求的结果,并在下次将服务注入某个对象时检索它

angular.module('myApp', ['ngResource']).factory('myService',
  function($resource) {
    var cache = false;
    return {
      query: function() {
        if(!cache) {
          cache = $resource('http://example.com/api').query();
        }
        return cache;
      }
    };
  }
);

将缓存设置为true。

在Angular 8中,我们可以这样做:

import { Injectable } from '@angular/core';
import { YourModel} from '../models/<yourModel>.model';
import { UserService } from './user.service';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class GlobalDataService {

  private me: <YourModel>;

  private meObservable: Observable<User>;

  constructor(private yourModalService: <yourModalService>, private http: HttpClient) {

  }

  ngOnInit() {

  }


  getYourModel(): Observable<YourModel> {

    if (this.me) {
      return of(this.me);
    } else if (this.meObservable) {
      return this.meObservable;
    }
    else {
      this.meObservable = this.yourModalService.getCall<yourModel>() // Your http call
      .pipe(
        map(data => {
          this.me = data;
          return data;
        })
      );
      return this.meObservable;
    }
  }
}
this.globalDataService.getYourModel().subscribe(yourModel => {


});

上面的代码将在第一次调用时缓存远程API的结果,以便在对该方法的进一步请求中使用它。

您几乎不想缓存每个http请求。我不知道什么时候会是这样?每个应用程序/模块都不一样,不是吗?!如果您想缓存大多数请求,那么将默认值设置为true很方便。问题:将缓存的数据保存到$cacheFactory中有什么意义。。为什么不将其保存到服务中的本地对象中?有什么好的理由吗?看看这个。它为您提供了很多可定制性,包括本地存储支持、超时支持,以及各种各样的好东西。我对状态代码304特别好奇-浏览器缓存在不启用缓存的情况下工作吗:真的?如果不是,cache:true是否使其工作?缓存是永久性的还是仅在RAM中,并且在页面关闭时卸载?是否可以在不手动实现的情况下指定此缓存的时间限制?@Spock,$cacheFactory本身是一种可跨多个控制器和角度组件使用的服务。它可以用作通用api服务,将所有$http缓存到单个服务obj中,而不是为每个服务obj提供不同的服务对象。请注意,
angular data
现在已被弃用。最新版本是
js data angular
angular缓存库具有本应内置在angular的$cacheFactory中的功能。鉴于内置解决方案在使特定缓存过期方面的局限性,它似乎几乎毫无用处。angular cache factory也是最容易实现的第三方库之一。我有一个问题,如何检查GET是否失败,在这种情况下,如何不将$resource…query()@robert放入缓存。您可以检查.then方法的第二个参数,或者更好的是,使用.catch回调。例如$http.get(url).then(successCallback,failCallback)或$http.get(url).then(successCallback,failCallback).catch(errorCallback)即使failCallback中发生错误,也会执行错误回调,尽管更常见的做法是避免失败回调,并使用.then(success).catch(manageRequestFail)。希望这有助于理解这个想法,AngularJS$http文档中有更多信息。这将与使用浏览器的客户端应用程序一样安全,就像任何其他web应用程序一样。问题与AngularJS相关,而不是AngularJS,它们是完全不同的框架
angularBlogServices.factory('BlogPost', ['$resource',
    function($resource) {
        return $resource("./Post/:id", {}, {
            get:    {method: 'GET',    cache: true,  isArray: false},
            save:   {method: 'POST',   cache: false, isArray: false},
            update: {method: 'PUT',    cache: false, isArray: false},
            delete: {method: 'DELETE', cache: false, isArray: false}
        });
    }]);
import { Injectable } from '@angular/core';
import { YourModel} from '../models/<yourModel>.model';
import { UserService } from './user.service';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class GlobalDataService {

  private me: <YourModel>;

  private meObservable: Observable<User>;

  constructor(private yourModalService: <yourModalService>, private http: HttpClient) {

  }

  ngOnInit() {

  }


  getYourModel(): Observable<YourModel> {

    if (this.me) {
      return of(this.me);
    } else if (this.meObservable) {
      return this.meObservable;
    }
    else {
      this.meObservable = this.yourModalService.getCall<yourModel>() // Your http call
      .pipe(
        map(data => {
          this.me = data;
          return data;
        })
      );
      return this.meObservable;
    }
  }
}
this.globalDataService.getYourModel().subscribe(yourModel => {


});