আরএক্সজেএস পর্যবেক্ষক / পর্যবেক্ষণযোগ্য + ক্যাচিং + সাবস্ক্রিপশন ব্যবহার করে ক্যাশেযোগ্য এইচটিটিপি রেসপন্স ডেটা
নীচে কোড দেখুন
* অস্বীকৃতি: আমি আরএক্সজেএসে নতুন, তাই মনে রাখবেন যে আমি পর্যবেক্ষণযোগ্য / পর্যবেক্ষক পদ্ধতির অপব্যবহার করছি। আমার সমাধানটি বিশুদ্ধরূপে আমার পাওয়া অন্যান্য সমাধানগুলির সংমিশ্রণ এবং এটি একটি সাধারণ ভাল-ডকুমেন্টেড সমাধান খুঁজে পেতে ব্যর্থ হওয়ার পরিণতি। এইভাবে আমি আমার সম্পূর্ণ কোড সমাধান সরবরাহ করছি (যেমনটি আমি খুঁজে পেতে চাই) আশা করি যে এটি অন্যকে সহায়তা করে।
* দ্রষ্টব্য, এই পদ্ধতিটি গুগলফায়ারবেসঅবার্সেবলের উপর ভিত্তি করে। দুর্ভাগ্যক্রমে তারা হুডের নীচে কী করেছে তার প্রতিলিপি দেওয়ার জন্য আমার যথাযথ অভিজ্ঞতা / সময়ের অভাব রয়েছে। তবে নিম্নলিখিত কিছু ক্যাশে-সক্ষম ডেটাতে অ্যাসিনক্রোনাস অ্যাক্সেস সরবরাহের একটি সরল পদ্ধতি।
পরিস্থিতি : একটি 'পণ্য-তালিকা' উপাদানকে পণ্যের তালিকা প্রদর্শন করার দায়িত্ব দেওয়া হয়। সাইটটি এমন একক পৃষ্ঠার ওয়েব অ্যাপ্লিকেশন যা কিছু মেনু বোতাম রয়েছে যা পৃষ্ঠায় প্রদর্শিত পণ্যগুলিকে 'ফিল্টার' করবে।
সমাধান : উপাদানটি কোনও পরিষেবা পদ্ধতিতে "সাবস্ক্রাইব করে"। পরিষেবা পদ্ধতিটি পণ্য সামগ্রীর একটি অ্যারে প্রদান করে, যা উপাদান সাবস্ক্রিপশন কলব্যাকের মাধ্যমে অ্যাক্সেস করে। পরিষেবা পদ্ধতিটি নতুনভাবে তৈরি হওয়া পর্যবেক্ষকগুলিতে তার ক্রিয়াকলাপটি মোড় করে এবং পর্যবেক্ষককে ফিরিয়ে দেয়। এই পর্যবেক্ষকের অভ্যন্তরে এটি ক্যাশেড ডেটা অনুসন্ধান করে এবং এটি গ্রাহককে (উপাদানটি) ফেরত দেয় এবং ফিরে আসে। অন্যথায় এটি ডেটা পুনরুদ্ধার করার জন্য একটি http কল জারি করে, প্রতিক্রিয়াটির জন্য সাবস্ক্রাইব করে, যেখানে আপনি সেই ডেটা প্রক্রিয়া করতে পারেন (যেমন আপনার নিজের মডেলটিতে ডেটা ম্যাপ করুন) এবং তারপরে ডেটাটি গ্রাহকের কাছে ফেরত দিন।
কোড
পণ্য-list.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { ProductService } from '../../../services/product.service';
import { Product, ProductResponse } from '../../../models/Product';
@Component({
selector: 'app-product-list',
templateUrl: './product-list.component.html',
styleUrls: ['./product-list.component.scss']
})
export class ProductListComponent implements OnInit {
products: Product[];
constructor(
private productService: ProductService
) { }
ngOnInit() {
console.log('product-list init...');
this.productService.getProducts().subscribe(products => {
console.log('product-list received updated products');
this.products = products;
});
}
}
product.service.ts
import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import { Observable, Observer } from 'rxjs';
import 'rxjs/add/operator/map';
import { Product, ProductResponse } from '../models/Product';
@Injectable()
export class ProductService {
products: Product[];
constructor(
private http:Http
) {
console.log('product service init. calling http to get products...');
}
getProducts():Observable<Product[]>{
//wrap getProducts around an Observable to make it async.
let productsObservable$ = Observable.create((observer: Observer<Product[]>) => {
//return products if it was previously fetched
if(this.products){
console.log('## returning existing products');
observer.next(this.products);
return observer.complete();
}
//Fetch products from REST API
console.log('** products do not yet exist; fetching from rest api...');
let headers = new Headers();
this.http.get('http://localhost:3000/products/', {headers: headers})
.map(res => res.json()).subscribe((response:ProductResponse) => {
console.log('productResponse: ', response);
let productlist = Product.fromJsonList(response.products); //convert service observable to product[]
this.products = productlist;
observer.next(productlist);
});
});
return productsObservable$;
}
}
product.ts (মডেল)
export interface ProductResponse {
success: boolean;
msg: string;
products: Product[];
}
export class Product {
product_id: number;
sku: string;
product_title: string;
..etc...
constructor(product_id: number,
sku: string,
product_title: string,
...etc...
){
//typescript will not autoassign the formal parameters to related properties for exported classes.
this.product_id = product_id;
this.sku = sku;
this.product_title = product_title;
...etc...
}
//Class method to convert products within http response to pure array of Product objects.
//Caller: product.service:getProducts()
static fromJsonList(products:any): Product[] {
let mappedArray = products.map(Product.fromJson);
return mappedArray;
}
//add more parameters depending on your database entries and constructor
static fromJson({
product_id,
sku,
product_title,
...etc...
}): Product {
return new Product(
product_id,
sku,
product_title,
...etc...
);
}
}
Chrome এ পৃষ্ঠাটি লোড করার সময় আমি যে আউটপুটটি দেখি তা এখানে একটি নমুনা Here নোট করুন যে প্রাথমিক লোডে, পণ্যগুলি HTTP থেকে আনা হয় (আমার নোড রেস্ট পরিষেবাতে কল করুন, যা স্থানীয়ভাবে 3000 বন্দরে চলছে)। আমি যখন তখন পণ্যগুলির একটি 'ফিল্টারড' দর্শন নেভিগেট করতে ক্লিক করি তখন পণ্যগুলি ক্যাশে পাওয়া যায়।
আমার ক্রোম লগ (কনসোল):
core.es5.js:2925 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
app.component.ts:19 app.component url: /products
product.service.ts:15 product service init. calling http to get products...
product-list.component.ts:18 product-list init...
product.service.ts:29 ** products do not yet exist; fetching from rest api...
product.service.ts:33 productResponse: {success: true, msg: "Products found", products: Array(23)}
product-list.component.ts:20 product-list received updated products
... [পণ্যগুলি ফিল্টার করার জন্য একটি মেনু বোতাম ক্লিক করেছেন] ...
app.component.ts:19 app.component url: /products/chocolatechip
product-list.component.ts:18 product-list init...
product.service.ts:24 ## returning existing products
product-list.component.ts:20 product-list received updated products
উপসংহার: ক্যাশেবল HTTP প্রতিক্রিয়া ডেটা বাস্তবায়নের জন্য এটি আমি এখন পর্যন্ত (এতদূর) সবচেয়ে সহজ উপায়। আমার কৌণিক অ্যাপ্লিকেশনে, প্রতিবার আমি পণ্যগুলির ভিন্ন দৃশ্যে নেভিগেট করি, পণ্য-তালিকা উপাদান পুনরায় লোড করে। প্রোডাক্ট সার্ভিসকে একটি ভাগ করা উদাহরণ বলে মনে হচ্ছে, তাই পণ্যসেবায় 'পণ্যগুলি: পণ্য []' এর স্থানীয় ক্যাশে নেভিগেশনের সময় ধরে রাখা হয় এবং পরবর্তীকালে "গেটপড্রুক্টস ()" এ কল করা ক্যাশেড মানটি দেয়। একটি চূড়ান্ত নোট, আমি যখন 'স্মৃতি স্মৃতি ফাঁস' রোধ করার জন্য পর্যবেক্ষণযোগ্য / সাবস্ক্রিপশনগুলি বন্ধ করার দরকার হয় সে সম্পর্কে মন্তব্যগুলি পড়েছি। আমি এটিকে এখানে অন্তর্ভুক্ত করি নি তবে এটি মনে রাখা দরকার something