Tôi muốn có thể tạo một dịch vụ AngularJS tùy chỉnh để thực hiện yêu cầu 'Nhận' HTTP khi đối tượng dữ liệu của nó trống và đưa đối tượng dữ liệu thành công.

Lần tiếp theo cuộc gọi được thực hiện cho dịch vụ này, tôi muốn bỏ qua chi phí thực hiện lại yêu cầu HTTP và thay vào đó trả về đối tượng dữ liệu được lưu trong bộ nhớ cache.

Điều này có thể không?

$ Http của Angular có bộ đệm được tích hợp sẵn . Theo các tài liệu:

bộ đệm - {boolean | Object} - Một giá trị hoặc đối tượng boolean được tạo bằng $ cacheFactory để bật hoặc tắt bộ đệm ẩn của phản hồi HTTP. Xem $ http Bộ đệm để biết thêm thông tin .

Giá trị Boolean

Vì vậy, bạn có thể đặt cachethành đúng trong các tùy chọn của nó:

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

hoặc, nếu bạn thích loại cấu hình của cuộc gọi:

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

Đối tượng bộ nhớ cache

Bạn cũng có thể sử dụng bộ đệm cache:

var cache = $cacheFactory('myCache');

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

Bạn có thể tự thực hiện bằng $ cacheFactory (đặc biệt là khi sử dụng $ resource):

var cache = $cacheFactory('myCache');

var data = cache.get(someKey);

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

Tôi nghĩ bây giờ có một cách dễ dàng hơn. Điều này cho phép bộ nhớ đệm cơ bản cho tất cả các yêu cầu $ http (mà $ resource kế thừa):

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

Một cách dễ dàng hơn để làm điều này trong phiên bản ổn định hiện tại (1.0.6) đòi hỏi ít mã hơn.

Sau khi thiết lập mô-đun của bạn, thêm một nhà máy:

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

Bây giờ bạn có thể chuyển cái này vào bộ điều khiển của bạn:

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

Một nhược điểm là các tên chính cũng được thiết lập tự động, điều này có thể khiến việc xóa chúng trở nên khó khăn. Hy vọng rằng họ sẽ thêm một số cách để có được tên chính.

Kiểm tra bộ đệm góc thư viện nếu bạn thích bộ nhớ đệm tích hợp của $ http nhưng muốn kiểm soát nhiều hơn. Bạn có thể sử dụng nó để tăng liên tục bộ đệm $ http với thời gian thực hiện, thanh lọc định kỳ và tùy chọn duy trì bộ đệm cho localStorage để nó có sẵn trong các phiên.

FWIW, nó cũng cung cấp các công cụ và mẫu để biến bộ đệm của bạn thành một loại lưu trữ dữ liệu năng động hơn mà bạn có thể tương tác với tư cách là POJO, thay vì chỉ các chuỗi JSON mặc định. Chưa thể nhận xét về tiện ích của tùy chọn đó.

(Sau đó, trên hết, dữ liệu góc của thư viện có liên quan là loại thay thế cho $ resource và / hoặc Restangular, và phụ thuộc vào bộ đệm góc.)

Vì các nhà máy của AngularJS là các singletons , bạn chỉ cần lưu trữ kết quả của yêu cầu http và truy xuất nó vào lần tới khi dịch vụ của bạn được đưa vào một cái gì đó.

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

đặt bộ đệm thành đúng.

Trong Angular 8 chúng ta có thể làm như thế này:

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

Bạn có thể gọi nó như thế này:

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


});

Đoạn mã trên sẽ lưu trữ kết quả của API từ xa trong lần gọi đầu tiên để có thể sử dụng nó cho các yêu cầu tiếp theo đối với phương thức đó.