Saya ingin dapat membuat layanan AngularJS kustom yang membuat permintaan 'Dapatkan' HTTP ketika objek datanya kosong dan mengisi objek data pada kesuksesan.

Lain kali panggilan dibuat untuk layanan ini, saya ingin memotong overhead membuat permintaan HTTP lagi dan bukannya mengembalikan objek data yang di-cache.

Apakah ini mungkin?

$ Http Angular memiliki cache bawaan . Menurut dokumen:

cache - {boolean | Object} - Nilai boolean atau objek yang dibuat dengan $ cacheFactory untuk mengaktifkan atau menonaktifkan caching dari respons HTTP. Lihat $ http Caching untuk informasi lebih lanjut .

Nilai Boolean

Sehingga Anda dapat mengatur cacheuntuk benar dalam pilihan nya:

$http.get(url, { cache: true}).success(...);

atau, jika Anda lebih suka jenis panggilan konfigurasi:

$http({ cache: true, url: url, method: 'GET'}).success(...);

Objek Cache

Anda juga dapat menggunakan pabrik cache:

var cache = $cacheFactory('myCache');

$http.get(url, { cache: cache })

Anda dapat menerapkannya sendiri menggunakan $ cacheFactory (terutama dengan mudah saat menggunakan $ resource):

var cache = $cacheFactory('myCache');

var data = cache.get(someKey);

if (!data) {
   $http.get(url).success(function(result) {
      data = result;
      cache.put(someKey, data);
   });
}

Saya pikir ada cara yang lebih mudah sekarang. Ini memungkinkan caching dasar untuk semua permintaan $ http (yang diwarisi $ resource):

 var app = angular.module('myApp',[])
      .config(['$httpProvider', function ($httpProvider) {
            // enable http caching
           $httpProvider.defaults.cache = true;
      }])

Cara yang lebih mudah untuk melakukan ini dalam versi stabil saat ini (1.0.6) membutuhkan kode jauh lebih sedikit.

Setelah mengatur modul Anda tambahkan pabrik:

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');
});

Sekarang Anda bisa meneruskan ini ke controller Anda:

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

Salah satu kelemahannya adalah bahwa nama-nama kunci juga diatur secara otomatis, yang dapat membuatnya sulit. Semoga mereka akan menambahkan cara untuk mendapatkan nama kunci.

Periksa cache cache sudut jika Anda suka caching bawaan $ http tetapi ingin lebih banyak kontrol. Anda dapat menggunakannya untuk menambah cache $ http secara mulus dengan pembersihan time-to-live, berkala, dan opsi mempertahankan cache ke localStorage sehingga tersedia di seluruh sesi.

FWIW, ia juga menyediakan alat dan pola untuk membuat cache Anda menjadi semacam penyimpanan data yang lebih dinamis yang dapat Anda berinteraksi dengan POJO, bukan hanya string JSON default. Belum dapat mengomentari utilitas opsi itu.

(Kemudian, di atas semua itu, data angular library terkait adalah semacam pengganti $ resource dan / atau Restangular, dan bergantung pada cache-angular.)

Karena pabrik AngularJS adalah lajang , Anda cukup menyimpan hasil permintaan http dan mengambilnya saat layanan Anda disuntikkan ke dalam sesuatu.

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}
        });
    }]);

setel cache menjadi true.

Di Angular 8 kita bisa melakukan ini:

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

Anda bisa menyebutnya seperti ini:

this.globalDataService.getYourModel().subscribe(yourModel => {


});

Kode di atas akan men-cache hasil API jarak jauh saat panggilan pertama sehingga dapat digunakan pada permintaan lebih lanjut untuk metode itu.