回答:
Angularの$ httpにはキャッシュが組み込まれています。ドキュメントによると：
cache – {boolean | Object} – HTTP応答のキャッシュを有効または無効にするために$ cacheFactoryで作成されたブール値またはオブジェクト。詳細については、$ httpキャッシュを参照 してください。
だから、設定することができますcacheし、真のオプションで：
$http.get(url, { cache: true}).success(...);または、configタイプの呼び出しを希望する場合：
$http({ cache: true, url: url, method: 'GET'}).success(...);キャッシュファクトリを使用することもできます。
var cache = $cacheFactory('myCache');
$http.get(url, { cache: cache })$ cacheFactoryを使用して自分で実装できます（特に$ resourceを使用する場合は特に便利です）。
var cache = $cacheFactory('myCache');
var data = cache.get(someKey);
if (!data) {
$http.get(url).success(function(result) {
data = result;
cache.put(someKey, data);
});
}今はもっと簡単な方法があると思います。これにより、すべての$ httpリクエスト（$ resourceが継承する）の基本的なキャッシュが有効になります。
var app = angular.module('myApp',[])
.config(['$httpProvider', function ($httpProvider) {
// enable http caching
$httpProvider.defaults.cache = true;
}])現在の安定バージョン（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
});
});欠点の1つは、キー名も自動的に設定されるため、それらをクリアするのが難しいことです。うまくいけば、キー名を取得するために何らかの方法で追加されるでしょう。
$ httpのビルトインキャッシュが好きだが、より詳細な制御が必要な場合は、ライブラリangular-cacheをチェックしてください。これを使用して、存続時間、定期的なパージ、およびセッション全体で使用できるようにキャッシュをlocalStorageに永続化するオプションを使用して、$ httpキャッシュをシームレスに拡張できます。
FWIWは、デフォルトのJSON文字列だけでなく、POJOとして操作できるより動的な種類のデータストアにキャッシュを作成するためのツールとパターンも提供します。そのオプションのユーティリティについてはまだコメントできません。
（さらに、関連するライブラリangular-dataは、$ resourceやRestangularの代わりとなるもので、angular-cacheに依存しています。）
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;
}
};
}
);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}
});
}]);キャッシュを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の結果をキャッシュし、そのメソッドへの以降のリクエストで使用できるようにします。