অ্যাঙ্গুলারজেএস-এ কোনও HTTP 'পান' পরিষেবা প্রতিক্রিয়াটি ক্যাশে করবেন?


211

আমি একটি কাস্টম অ্যাঙ্গুলারজেএস পরিষেবা তৈরি করতে সক্ষম হতে চাই যা কোনও HTTP 'get' অনুরোধ করে যখন এর ডেটা অবজেক্ট খালি থাকে এবং সাফল্যে ডেটা অবজেক্টকে জনপ্রিয় করে তোলে।

পরের বার এই পরিষেবায় কোনও কল করা হলে আমি আবার HTTP অনুরোধ করার ওভারহেডটি বাইপাস করতে চাই এবং পরিবর্তে ক্যাশেড ডেটা অবজেক্টটি ফিরিয়ে দিতে চাই।

এটা কি সম্ভব?

উত্তর:


315

কৌণিকের $ 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 })

আপনি এটি implement ক্যাশেফ্যাক্টরি ব্যবহার করে নিজে প্রয়োগ করতে পারেন (বিশেষত হ্যান্ডলি $ রিসোর্স ব্যবহার করার সময়):

var cache = $cacheFactory('myCache');

var data = cache.get(someKey);

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

47
প্রশ্ন: ক্যাশেড ফ্যাক্টরিতে ক্যাশড ডেটা সংরক্ষণ করার মূল বিষয় কী .. কেন এটি পরিষেবাতে কোনও স্থানীয় অবজেক্টে সংরক্ষণ করবেন না? কোন ভাল কারণ?
স্পট

7
এটা দেখ. এটা তোলে গুডিজ সব ধরণের localStorage সমর্থন সহ customizability আপনার প্রচুর, সময়সীমার সমর্থন, দেয় http://jmdobry.github.io/angular-cache/
এরিক Donohoo

4
আমি বিশেষত স্ট্যাটাস কোড 304 সম্পর্কে কৌতূহলী - ব্রাউজারের ক্যাশে সক্ষম করা ছাড়া কী কাজ করে: সত্য? যদি না হয়, ক্যাশে: সত্য কি এটি কাজ করে? ক্যাশে স্থায়ী হয় বা এটি কেবল র‌্যামে থাকে এবং পৃষ্ঠাটি বন্ধ হয়ে গেলে আনলোড হয়?
sasha.sochka

3
ম্যানুয়ালি এটি প্রয়োগ না করে এই ক্যাশে কোনও সময়সীমা নির্দিষ্ট করার কোনও উপায়?
চিহ্নিত করুন

11
@ স্পোক, $ ক্যাশেফ্যাক্টরি নিজেই একটি পরিষেবা যা একাধিক নিয়ামক এবং কৌণিক উপাদান জুড়ে ব্যবহার করা যেতে পারে। এটিকে জেনেরিক এপি সার্ভিস হিসাবে ব্যবহার করা যেতে পারে আপনার সমস্ত $ এইচটিএস এর প্রত্যেকটির জন্য আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা আলাদা সার্ভিস অবজেক্ট থাকার চেয়ে একক পরিষেবায় ache
নীরভ গান্ধী

48

আমি মনে করি এখন আরও সহজ উপায় আছে। এটি সমস্ত $ http অনুরোধের জন্য প্রাথমিক ক্যাচিং সক্ষম করে (যা $ সংস্থান উত্তরাধিকার সূত্রে প্রাপ্ত):

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

46
আপনি প্রতিটি একক http অনুরোধকে খুব কমই ক্যাশে করতে চান। আমি কখনই দেখি না কখন এরকম হবে?
স্পোক করুন

1
প্রতিটি অ্যাপ / মডিউল আলাদা, না ?!
রডরিগো-সিলভিরা

13
আপনি যদি বেশিরভাগ অনুরোধকে ক্যাশে করতে চান তবে ডিফল্টটিকে সত্যে সেট করা সহজ।
অ্যাড্রিয়ান লিঞ্চ 8

12

বর্তমান স্থিতিশীল সংস্করণে (1.0.0) এটি করার একটি সহজ পদ্ধতির জন্য অনেক কম কোড দরকার।

আপনার মডিউল স্থাপনের পরে একটি কারখানা যুক্ত করুন:

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

একটি নেতিবাচক দিকটি হ'ল মূল নামগুলি স্বয়ংক্রিয়ভাবে সেটআপ হয় যা এগুলি মুছে ফেলা জটিল করে তুলতে পারে। আশা করি তারা মূল নামগুলি পেতে কোনওভাবে যুক্ত করবেন'll


7

আপনি যদি $ http এর অন্তর্নির্মিত ক্যাচিং পছন্দ করেন তবে আরও নিয়ন্ত্রণ চান তবে গ্রন্থাগারটি কৌণিক-ক্যাশে দেখুন। আপনি এটি নির্বিঘ্নে টাইম-টু-লাইভ, পর্যায়ক্রমিক শুদ্ধি এবং ক্যাশকে লোকালস্টোরারে স্থির রাখার বিকল্প সহ একচেটিয়াভাবে বাড়ানোর জন্য ব্যবহার করতে পারেন যাতে এটি অধিবেশন জুড়ে উপলভ্য।

এফডাব্লুআইডাব্লু, এটি আপনার ক্যাশেটিকে আরও গতিশীল ডেটা-স্টোর হিসাবে তৈরি করার জন্য সরঞ্জাম এবং নিদর্শন সরবরাহ করে যা আপনি কেবল ডিফল্ট জেএসওন স্ট্রিংয়ের পরিবর্তে POJO হিসাবে ইন্টারেক্ট করতে পারবেন। এখনও পর্যন্ত এই বিকল্পটির ইউটিলিটি সম্পর্কে মন্তব্য করতে পারবেন না।

(তারপরে, এর উপরে, সম্পর্কিত লাইব্রেরি কৌণিক-ডেটা হ'ল $ সংস্থান এবং / অথবা রেস্টাঙ্গুলার প্রতিস্থাপনের ধরণের, এবং কৌনিক-ক্যাশে নির্ভর করে))


3
দয়া করে নোট করুন যে angular-dataএখন হ্রাস করা হয়েছে। সর্বশেষতমটি হ'ল js-data-angular js-data.io/v1.8.0/docs/js-data-angular
demisx

কৌণিক-ক্যাশে পাঠাগারটিতে এমন বৈশিষ্ট্য রয়েছে যা কৌণিকের $ ক্যাশেফ্যাক্টরিতে তৈরি করা উচিত ছিল। নির্দিষ্ট ক্যাসের মেয়াদ শেষ করতে সক্ষম হওয়ার সীমাবদ্ধতার কারণে অন্তর্নির্মিত সমাধানটি প্রায় অকেজো বলে মনে হয়। কৌণিক-ক্যাশে কারখানাটি কার্যকর করার জন্য অন্যতম তৃতীয় পক্ষের গ্রন্থাগার ছিল।
ড্যারিল

5

AngularJS কারখানা আছেন যে singletons , আপনি কেবল 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;
      }
    };
  }
);

আমার কাছে একটি প্রশ্ন আছে যে কীভাবে জিইটি ব্যর্থ হয়েছে এবং কীভাবে সেই ক্ষেত্রে $ উত্স ... ক্যোয়ারী ()
ক্যাবারে রাখে না তা পরীক্ষা করে দেখুন

@ রবার্ট আপনি। দ্বিতীয় পদ্ধতির দ্বিতীয় তর্কটি পরীক্ষা করতে পারেন বা আরও ভাল, .চ্যাট কলব্যাকটি ব্যবহার করুন। উদাহরণস্বরূপ $ http .get (url)। তারপর (সাফল্যক্যালব্যাক, ফেইলক্যালব্যাক) বা $ HTTP .get (url) .পথ (সাফল্য ক্যালব্যাক, ফেইলক্যালব্যাক) .ক্যাচ (ত্রুটি কলব্যাক) ব্যর্থ কলব্যাকটি কার্যকর করা হবে যদি ব্যর্থ কল্যাব্যাকের মধ্যে কিছু খারাপ ঘটে থাকে তবুও ত্রুটি কলব্যাক কার্যকর করা হবে যদিও একেবারেই ব্যর্থ কলব্যাক এড়ানো এবং ব্যবহার করা বেশি সাধারণ। তবু (সাফল্য) .ক্যাচ করুন (ম্যানেজরেকুয়েস্টফেইল)। আশা করি ধারণাটি উপলব্ধি করতে সহায়তা করবে, কৌনিক $ এইচটিপি ডকুমেন্টেশনে আরও তথ্য।
ফেইটো

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

সত্য হতে ক্যাশে সেট করুন।


এটি ব্রাউজারের সাথে ক্লায়েন্ট অ্যাপ্লিকেশনটির মতোই সুরক্ষিত হবে যেমন অন্য কোনও ওয়েব অ্যাপের মতোই।
ভ্যানটল

-1

কৌনিক 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 => {


});

উপরের কোডটি প্রথম কলটিতে দূরবর্তী এপিআইয়ের ফলাফলকে ক্যাশে করবে যাতে এটি সেই পদ্ধতির আরও অনুরোধে ব্যবহার করা যায়।

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.