ทั้งสองPromisesและObservablesให้ abstractions ที่ช่วยให้เราจัดการกับธรรมชาติแบบอะซิงโครนัสของแอปพลิเคชันของเรา ความแตกต่างระหว่างพวกเขาถูกชี้อย่างชัดเจนโดย@Günterและ @Relu
เนื่องจากข้อมูลโค้ดมีค่าหนึ่งพันคำให้อ่านตัวอย่างด้านล่างเพื่อทำความเข้าใจได้ง่ายขึ้น
ขอบคุณ @Christoph Burgdorf สำหรับบทความที่ยอดเยี่ยม
Angular ใช้ Rx.js Observables แทนที่จะให้สัญญากับการจัดการกับ HTTP
สมมติว่าคุณกำลังสร้างฟังก์ชั่นการค้นหาที่ควรแสดงผลลัพธ์ทันทีที่คุณพิมพ์ ฟังดูคุ้นเคย แต่มีความท้าทายมากมายที่มาพร้อมกับงานนั้น
- เราไม่ต้องการโจมตีเซิร์ฟเวอร์ปลายทางทุกครั้งที่ผู้ใช้กดปุ่มมันน่าจะท่วมพวกเขาด้วยพายุ
HTTPคำขอ โดยพื้นฐานแล้วเราต้องการตีเมื่อผู้ใช้หยุดพิมพ์แทนที่จะกดแป้นทุกครั้ง
- อย่ากดจุดสิ้นสุดการค้นหาด้วยparams ของแบบสอบถามเดียวกันสำหรับคำขอที่ตามมา
- จัดการกับการตอบกลับที่ไม่เป็นไปตามคำสั่ง เมื่อเรามีคำขอหลายเที่ยวบินในเวลาเดียวกันเราจะต้องพิจารณากรณีที่พวกเขากลับมาในลำดับที่ไม่คาดคิด ลองจินตนาการว่าเราพิมพ์คอมพิวเตอร์เป็นครั้งแรกหยุดคำขอออกไปเราพิมพ์รถยนต์หยุดขอออกไป ตอนนี้เรามีสองคำขอในเที่ยวบิน แต่น่าเสียดายที่การร้องขอที่ดำเนินการผลสำหรับคอมพิวเตอร์กลับมาหลังจากการร้องขอที่ดำเนินการผลสำหรับรถยนต์
การสาธิตก็จะประกอบด้วยสองไฟล์: และapp.ts wikipedia-service.tsในสถานการณ์โลกแห่งความเป็นจริงเราน่าจะแยกสิ่งต่างๆออกไปอีก
ด้านล่างคือการใช้งานตามสัญญาที่ไม่ได้จัดการกรณีขอบที่อธิบายไว้ใด ๆ
wikipedia-service.ts
import { Injectable } from '@angular/core';
import { URLSearchParams, Jsonp } from '@angular/http';
@Injectable()
export class WikipediaService {
constructor(private jsonp: Jsonp) {}
search (term: string) {
var search = new URLSearchParams()
search.set('action', 'opensearch');
search.set('search', term);
search.set('format', 'json');
return this.jsonp
.get('http://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK', { search })
.toPromise()
.then((response) => response.json()[1]);
}
}
เรากำลังเพิ่มJsonpบริการเพื่อทำการGETร้องขอกับWikipedia APIพร้อมกับข้อความค้นหาที่ระบุ ขอให้สังเกตว่าเราเรียกtoPromiseเพื่อให้ได้รับจากไปObservable<Response> Promise<Response>ในที่สุดท้ายด้วย a Promise<Array<string>>เป็นประเภทส่งคืนของวิธีการค้นหาของเรา
app.ts
// check the plnkr for the full list of imports
import {...} from '...';
@Component({
selector: 'my-app',
template: `
<div>
<h2>Wikipedia Search</h2>
<input #term type="text" (keyup)="search(term.value)">
<ul>
<li *ngFor="let item of items">{{item}}</li>
</ul>
</div>
`
})
export class AppComponent {
items: Array<string>;
constructor(private wikipediaService: WikipediaService) {}
search(term) {
this.wikipediaService.search(term)
.then(items => this.items = items);
}
}
ไม่แปลกใจเลยที่นี่เช่นกัน เราอัดฉีดWikipediaServiceและแสดงให้เห็นถึงการทำงานของมันผ่านวิธีการค้นหาไปยังเทมเพลต แม่แบบก็ผูกกับkeyupsearch(term.value)และบริการโทร
เราแกะผลลัพธ์ของสัญญาว่าวิธีการค้นหาของ WikipediaService จะส่งคืนและแสดงเป็น Array แบบสตริงที่เรียบง่ายไปยังเทมเพลตเพื่อให้เราสามารถ*ngForวนซ้ำมันและสร้างรายการสำหรับเรา
ดูตัวอย่างของการใช้งานตามสัญญาบนPlunker
จุดสังเกตที่ส่องแสงจริงๆ
ลองเปลี่ยนรหัสของเราเพื่อไม่ใช้จุดปลายกับการกดแป้นทุกครั้ง แต่จะส่งการร้องขอเมื่อผู้ใช้หยุดพิมพ์400 ms
ในการเปิดเผยพลังพิเศษเช่นนี้เราต้องได้รับข้อความObservable<string>ค้นหาที่ผู้ใช้พิมพ์มาก่อนแทนที่จะเชื่อมโยงกับเหตุการณ์คีย์อัพด้วยตนเองเราสามารถใช้ประโยชน์จากformControlคำสั่งของ Angular ในการใช้คำสั่งนี้เราต้องนำเข้าReactiveFormsModuleสู่โมดูลแอปพลิเคชันของเราก่อน
app.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { JsonpModule } from '@angular/http';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [BrowserModule, JsonpModule, ReactiveFormsModule]
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
เมื่อนำเข้าแล้วเราสามารถใช้ formControl จากภายในแม่แบบของเราและตั้งเป็นชื่อ "term"
<input type="text" [formControl]="term"/>
ในองค์ประกอบของเราเราสร้างอินสแตนซ์ของFormControlจาก@angular/formและเปิดเผยเป็นฟิลด์ภายใต้ชื่อคำในส่วนประกอบของเรา
เบื้องหลังคำว่า exposes Observable<string>เป็นคุณสมบัติvalueChangesที่เราสามารถสมัครรับข้อมูลโดยอัตโนมัติ ตอนนี้เรามีObservable<string>การเอาชนะผู้ใช้ป้อนเป็นเรื่องง่ายเหมือนการเรียกของเราdebounceTime(400) Observableสิ่งนี้จะคืนค่าใหม่Observable<string>ที่จะปล่อยค่าใหม่เมื่อไม่มีค่าใหม่มาเป็นเวลา 400ms
export class App {
items: Array<string>;
term = new FormControl();
constructor(private wikipediaService: WikipediaService) {
this.term.valueChanges
.debounceTime(400) // wait for 400ms pause in events
.distinctUntilChanged() // ignore if next search term is same as previous
.subscribe(term => this.wikipediaService.search(term).then(items => this.items = items));
}
}
มันจะเป็นการสิ้นเปลืองทรัพยากรในการส่งคำขอใหม่สำหรับคำค้นหาที่แอปของเราแสดงผลลัพธ์แล้ว สิ่งที่เราต้องทำเพื่อให้ได้พฤติกรรมที่ต้องการคือโทรหาdistinctUntilChangedผู้ให้บริการทันทีหลังจากที่เราเรียกdebounceTime(400)
ดูตัวอย่างของการใช้งานที่สังเกตได้บนPlunker
สำหรับการรับมือกับการตอบสนองออกจากการสั่งซื้อโปรดตรวจสอบบทความเต็ม
http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html
เท่าที่ฉันกำลังใช้ Http ใน Angular ฉันยอมรับว่าในกรณีการใช้งานปกติมีความแตกต่างไม่มากนักเมื่อใช้ Observable over Promise ไม่มีประโยชน์ใดที่เกี่ยวข้องกับการปฏิบัติจริงที่นี่ หวังว่าฉันจะเห็นกรณีการใช้งานขั้นสูงในอนาคต :)
เรียนรู้เพิ่มเติม
