ฉันต้องการที่จะสามารถสร้างบริการ AngularJS ที่กำหนดเองที่ทำให้การร้องขอ HTTP 'รับ' เมื่อวัตถุข้อมูลของมันว่างเปล่าและเติมวัตถุข้อมูลในความสำเร็จ

ครั้งต่อไปที่มีการโทรไปยังบริการนี้ฉันต้องการข้ามค่าใช้จ่ายในการร้องขอ HTTP อีกครั้งและส่งคืนวัตถุข้อมูลที่แคช

เป็นไปได้ไหม

$ httpของ Angular มีแคชในตัว ตามเอกสาร:

cache - {boolean | Object} - ค่าบูลีนหรือวัตถุที่สร้างด้วย $ cacheFactory เพื่อเปิดใช้งานหรือปิดใช้งานการแคชการตอบสนอง HTTP ดู $ http แคชสำหรับข้อมูลเพิ่มเติม

ค่าบูลีน

เพื่อให้คุณสามารถตั้งค่าcacheเพื่อความจริงในตัวเลือก:

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

หรือถ้าคุณชอบประเภทการโทร:

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

วัตถุแคช

คุณยังสามารถใช้โรงงานแคช:

var cache = $cacheFactory('myCache');

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

คุณสามารถนำไปใช้ด้วยตัวเองโดยใช้$ cacheFactory (โดยเฉพาะอย่างยิ่งเมื่อใช้ทรัพยากร $):

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

ข้อเสียอย่างหนึ่งคือชื่อคีย์นั้นตั้งค่าโดยอัตโนมัติเช่นกัน หวังว่าพวกเขาจะเพิ่มวิธีรับชื่อคีย์

ลองใช้ไลบรารีangular-cacheถ้าคุณชอบการแคชในตัวของ $ http แต่ต้องการการควบคุมที่มากกว่า คุณสามารถใช้เพื่อเพิ่มแคช $ http ได้อย่างราบรื่นด้วยการล้างข้อมูลตามระยะเวลาการล้างข้อมูลเป็นระยะและตัวเลือกในการคงแคชไว้ใน localStorage เพื่อให้สามารถใช้งานได้ในเซสชันต่างๆ

FWIW มันยังมีเครื่องมือและรูปแบบสำหรับทำให้แคชของคุณเป็นแหล่งข้อมูลที่มีพลวัตมากขึ้นซึ่งคุณสามารถโต้ตอบกับในฐานะ POJO แทนที่จะเป็นแค่สตริง JSON เริ่มต้น ยังไม่สามารถแสดงความคิดเห็นเกี่ยวกับยูทิลิตี้ของตัวเลือกดังกล่าวได้

(จากนั้นยิ่งไปกว่านั้น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}
        });
    }]);

ตั้งค่าแคชให้เป็นจริง

ในเชิงมุม 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 ระยะไกลในการโทรครั้งแรกเพื่อให้สามารถใช้กับการร้องขอเพิ่มเติมไปยังวิธีการนั้นได้