Cache एक HTTP 'पाएं' सेवा प्रतिक्रिया AngularJS में?

Question

मैं एक कस्टम AngularJS सेवा बनाने में सक्षम होना चाहता हूं जो HTTP का 'गेट' अनुरोध करती है जब उसका डेटा ऑब्जेक्ट खाली होता है और सफलता पर डेटा ऑब्जेक्ट को पॉप्युलेट करता है।

अगली बार जब इस सेवा पर कॉल किया जाता है, तो मैं HTTP अनुरोध करने के ओवरहेड को फिर से बायपास करना चाहूंगा और इसके बजाय कैश्ड डेटा ऑब्जेक्ट को वापस करूंगा।

क्या यह संभव है?

Answer 1

Angular's $ http में निर्मित कैश है । डॉक्स के अनुसार:

कैश - {बूलियन | ऑब्जेक्ट} - 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);
   });
}

Comments

प्रश्न: कैश्ड डेटा को $ cacheFactory में सहेजने की क्या बात है .. क्यों न इसे सेवा में स्थानीय ऑब्जेक्ट में सहेजा जाए? कोई अच्छा कारण?

— स्पॉक

इसकी जांच करें। यह आपको लोकलस्टोरेज सपोर्ट, टाइमआउट सपोर्ट, सभी तरह की

— गुडीज

मैं विशेष रूप से स्टेटस कोड 304 के बारे में उत्सुक हूं - क्या ब्राउज़र कैश कैश को सक्षम किए बिना काम करता है: सच? यदि नहीं, तो कैश: क्या यह काम करता है? क्या स्थायी कैशिंग है या यह सिर्फ RAM में है और पेज बंद होने पर उतार दिया जाता है?

— साशा.सोचका

मैन्युअल रूप से इसे लागू किए बिना इस कैश पर समय सीमा निर्दिष्ट करने का कोई तरीका?

— मार्क

@Spock, $ cacheFactory ही एक ऐसी सेवा है जिसका उपयोग कई नियंत्रकों और कोणीय घटकों में किया जा सकता है। इसका उपयोग एक सामान्य एपिक सेवा के रूप में किया जा सकता है, जिसमें से प्रत्येक के लिए अलग-अलग सेवा ऑब्जेक्ट होने के बजाय आपके सभी $ http की एकल सेवा obj में कैश करने के लिए है।

— नीरव गांधी

Answer 2

मुझे लगता है कि अब और भी आसान तरीका है। यह सभी $ http अनुरोधों के लिए मूल कैशिंग सक्षम करता है (जो $ संसाधन विरासत में मिलता है):

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

Comments

आप शायद ही हर एक HTTP अनुरोध को कैश करना चाहते हैं। मैं यह नहीं देखता कि ऐसा कब होगा?

— स्पॉक

हर ऐप / मॉड्यूल अलग है, नहीं ?!

— रॉडरिगो-सिल्वेरा

यदि आप अधिकांश अनुरोधों को कैश करना चाहते हैं तो डिफ़ॉल्ट को सही पर सेट करना आसान है।

— एड्रियन लिंच

Answer 3

वर्तमान स्थिर संस्करण (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
    });
});

एक नकारात्मक पहलू यह है कि प्रमुख नाम भी स्वचालित रूप से सेटअप किए जाते हैं, जो उन्हें स्पष्ट कर सकता है। उम्मीद है कि वे कुंजी नाम प्राप्त करने के लिए किसी तरह जोड़ लेंगे।

Answer 4

यदि आप $ http की अंतर्निहित कैशिंग पसंद करते हैं, तो लाइब्रेरी कोणीय-कैश देखें । आप समय-समय पर लाइव, आवधिक पर्स, और कैश को स्थानीय स्तर पर जारी रखने का विकल्प के साथ $ http कैश को मूल रूप से बढ़ाने के लिए इसका उपयोग कर सकते हैं ताकि यह सत्रों में उपलब्ध हो।

FWIW, यह आपके कैश को डेटा-स्टोर के एक अधिक गतिशील प्रकार में आपके कैश बनाने के लिए उपकरण और पैटर्न भी प्रदान करता है जिसे आप POJO के रूप में बातचीत कर सकते हैं, बजाय केवल डिफ़ॉल्ट JSON के तार के। उस विकल्प की उपयोगिता पर अभी तक टिप्पणी नहीं कर सकते।

(फिर, उसके शीर्ष पर, संबंधित लाइब्रेरी कोणीय-डेटा $ संसाधन और / या रिस्टैन्गुलर के लिए प्रतिस्थापन की तरह है, और कोणीय-कैश पर निर्भर है।)

Comments

कृपया ध्यान दें कि angular-dataअभी पदावनत किया गया है। नवीनतम है js-data-angular js-data.io/v1.8.0/docs/js-data-angular

— demisx

कोणीय-कैश लाइब्रेरी में वे विशेषताएं हैं जिन्हें एंगुलर के $ cacheFactory में बनाया जाना चाहिए था। अंतर्निहित समाधान लगभग बेकार लगता है क्योंकि यह विशिष्ट कैश को समाप्त करने में सक्षम होने की सीमाएं हैं। कोणीय-कैश फैक्ट्री सबसे आसान 3 जी लाइब्रेरी के रूप में अच्छी तरह से लागू करने के लिए थी।

— डैरिल

Answer 5

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

Comments

मेरे पास एक सवाल है कि अगर GET फेल हुआ और उस मामले में $ संसाधन नहीं डाला तो जांच कैसे की जाए ... क्वेरी ()

— robert

@robert आप .then विधि के दूसरे तर्क पर जांच कर सकते हैं या बेहतर अभी तक, .catch कॉलबैक का उपयोग कर सकते हैं। उदाहरण के लिए $ http .get (url) .then (successCallback, failCallback) या $ http .get (url) .then (सक्सेसकॉलबैक, failCallback) .catch (errorCallback) त्रुटि कॉलबैक निष्पादित किया जाएगा, भले ही कुछ भी असफल Callback में हो। , हालांकि यह सभी में असफल कॉलबैक से बचने और उपयोग करने के लिए अधिक सामान्य है। फिर (सफलता) .catch (manageRequestFail)। आशा है कि इस विचार को समझने में मदद मिलेगी, कोणीय $ http प्रलेखन में अधिक जानकारी।

— Faito

Answer 6

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

सच होने के लिए कैश सेट करें।

Comments

यह किसी अन्य वेब ऐप की तरह ही ब्राउज़र के साथ क्लाइंट एप्लिकेशन के रूप में सुरक्षित होगा।

— bhantol

Answer 7

कोणीय 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 => {


});

उपरोक्त कोड पहली कॉल पर दूरस्थ एपीआई के परिणाम को कैश करेगा ताकि इसका उपयोग उस पद्धति के आगे अनुरोधों पर किया जा सके।