ما موردی داریم که در آن از observable برای پر کردن رابط کاربری از داده های خارجی به صورت ناهمزمان استفاده می کنیم. Angular از همان چیزی برای این کار استفاده می کند. بیایید ببینیم چگونه می توانیم از مشاهدات استفاده کنیم و از آنها در یک برنامه Angular استفاده کنیم.
Observables چیست؟
مشاهده پذیرها مجموعه های تنبلی از مقادیر متعدد یا می توان گفت، داده ها در یک دوره هستند. قابل مشاهده ها کانال ارتباطی پیوسته را باز می کنند که در آن مقادیر متعددی در طول زمان منتشر می شوند. این به ما امکان می دهد الگوی داده ها را تعیین کنیم.
در یک مثال واقعی، میتوان گفت سرویس اینترنت ارائه شده توسط موبایل قابل مشاهده است. فقط برای افرادی که مشترک آن هستند در دسترس است. ما به طور مداوم این سرویس را فقط از ارائه دهنده خدمات دریافت می کنیم تا زمانی که این سرویس روشن و مشترک شود.
ایجاد قابل مشاهده اولیه
بیایید ابتدا قابل مشاهده اولیه را ایجاد کنیم و ببینیم آنها چه چیزی به ما ارائه می دهند. قطعه کد برای همان می تواند مانند زیر باشد.
- import { Component, OnInit } from '@angular/core';
- import {Observable} from 'rxjs/Observable'
- @Component({
- selector: 'app-observable-demo',
- templateUrl: './observable-demo.component.html',
- styleUrls: ['./observable-demo.component.css']
- })
- export class ObservableDemoComponent implements OnInit
- {
- private data: Observable<string>;
- private fruits: Array<string> = [];
- private anyErrors: boolean;
- private finished: boolean;
- processed=false;
- constructor() { }
- ngOnInit(){
- }
- Start(){
- this.data = new Observable
- (
- observer =>
- {
- setTimeout(() =>
- {
- observer.next('Apple');
- }, 1000);
- setTimeout(() =>
- {
- observer.next('mango');
- }, 2000);
- setTimeout(() =>
- {
- observer.next('Orannge');
- }, 3000);
- setTimeout(() =>
- {
- observer.complete();
- }, 4000);
- }
- );
- let subscription = this.data. subscribe(
- fruit => this.fruits.push(fruit),
- error => this.anyErrors = false,
- () => this.finished = true
- );
- this.processed=true; }}
بیایید شرح کد را مرحله به مرحله ببینیم،
- قابل مشاهده را از rxjs/Observable وارد کنید و در کامپوننت قرار دهید
- بعدی ایجاد شی قابل مشاهده است که در مثال ما شیء قابل مشاهده را ایجاد می کنیم که از رشته خواهد بود
- مورد بعدی عضویت Observable در برنامه است که به ما امکان می دهد به داده هایی که همراه با آن می آید گوش دهیم.
- در حین اشتراک، ابتدا از سه تماس برگشتی استفاده کردیم که قبلاً داده های منتشر شده توسط را می پذیرد
دومین مورد قابل مشاهده، Error call back است، و سومین مورد، callback موفقیت آمیز است که پس از دریافت کل داده ها فراخوانی می شود.
برای فراخوانی این قابل مشاهده، باید تغییراتی را در قالبی که انجام می دهیم انجام دهیم. قطعه کد برای الگو می تواند به این صورت باشد،
- <p style="padding-left:300px;font-weight:bold;font-size: 50px">Observable Basics</p>
- <hr/>
- <b>Observable Data </b>
- <div style="border: 3px;padding-left:150px;text-align: " *ngFor="let f of fruits"> {{ f | uppercase }}</div>
- <hr>
- <div *ngIf='anyErrors' style="border: 3px;padding-left:0px" >
- <b>Error Status :</b>
- {{anyErrors==true? 'error occured ' : 'It All Good'}}
- <hr>
- </div>
- <div style="border: 3px;padding-left:0px"> <b> completion status : </b> {{ finished==true ? 'Observer completed ': '' }}</div>
- <hr>
- <button style="margin-top: 2rem;" (click)="start()">Start Emitting</button>
کد بالا نام میوه هایی را که در خروجی برنامه منتشر می کنیم را نمایش می دهد.
بنابراین، وقتی خروجی را می بینیم، خروجی فوق را خواهیم دید.
نکته بعدی که می خواهیم ببینیم این است که چگونه می توانیم خطا را در ناظران کنترل کنیم.
مدیریت خطا در موارد مشاهده
ممکن است موردی وجود داشته باشد که هنگام استفاده از قابل مشاهده ها، خطا ایجاد شود. اگر در این بین موارد غیرمنتظرهای رخ داد، میتوانیم از تابع خطای قابل مشاهده در اشتراک خود استفاده کنیم تا بررسی کنیم چه مشکلی رخ داده است.
بیایید کد مؤلفه را برای همین مورد بررسی کنیم.
- import { Component, OnInit } from '@angular/core';
- import {Observable} from 'rxjs/Observable'
- @Component({
- selector: 'app-observable-demo',
- templateUrl: './observable-demo.component.html',
- styleUrls: ['./observable-demo.component.css']
- })
- export class ObservableDemoComponent implements OnInit {
- private data: Observable<string>;
- private fruits: Array<string> = [];
- private anyErrors: boolean;
- private finished: boolean;
- processed=false;
- constructor() { }
- ngOnInit(){
- }
- start(){
- this.data = new Observable
- (
- observer =>
- {
- setTimeout(() =>
- {
- observer.next('Apple');
- }, 1000);
- setTimeout(() =>
- {
- observer.next('mango');
- }, 2000);
- setTimeout(() =>
- {
- observer.next('Orannge');
- }, 3000);
- setTimeout(() =>
- {
- observer.error(new Error('error occured'));
- }, 4000);
- setTimeout(() =>
- {
- observer.complete();
- }, 5000); });
- let subscription = this.data.
- subscribe(
- fruit => this.fruits.push(fruit),
- error => this.anyErrors = true,
- () => this.finished = true
- );
- this.processed=true; }}
ما می توانیم خروجی را در اینجا مانند زیر مشاهده کنیم.