RxJS - Subscriber如何與Observable和Subscription不同？

Question

我一直試圖找到一個將Observable包裝到訂閱服務器中的示例，以監視異步調用的狀態，例如加載，完成或錯誤。 你能提供一個簡短的例子嗎？

Answer 1

不確定這是不是你的意思，但你可以像這樣包裝異步http調用

const httpStream = Observable.create(observer => {

    fetch('http://server.com')
      .then(response => response.json()) 
      .then(data => {
        observer.next(data); // if http call provides progress as well as completion
                             // these can all be pushed with observer.next()
        observer.complete();
      })
      .catch(err => observer.error(err));

  });

  httpStream.subscribe(data => console.log(data));

當然，如果它實際上是你想要包裝你可以反而只是做

var result = Rx.Observable.fromPromise(fetch('http://myserver.com/'));

編輯：如果你正在使用角度HttpClient，那么就不需要包裝它，因為它已經是一個可觀察的。 要獲得進度更新以及最終響應，以下內容應該有效

const req = new HttpRequest('POST', 'http://api.server.com', body, {
    reportProgress: true
});

this._http.request(req)
.filter((event) => event.type === HttpEventType.UploadProgress || event instanceof HttpResponse)
.map((event) => {
    if (event.type === HttpEventType.UploadProgress) {
        const percentDone = Math.round(100 * event.loaded / event.total);
        return { type: 'uploadProgress', percentDone };
    } else if (event instanceof HttpResponse) {
        return { type: 'httpResponse', status: event.status };
    } 
})
.subscribe((response) => {
    if (response.type === 'uploadProgress') {
        console.log(`upload still in progress - percent done = ${response.percentDone}%`);
    } else {
        console.log(`upload completed  - status = ${response.status}`);
    }
});

事實上，如果您想知道所有請求都已完成，並且不需要每個請求的進度更新，而不是將請求推送到數組中，則更好的選擇可能是使用forkJoin - 類似於promise.all，一旦所有子可觀察量都已完成，你只能從observable得到一個輸出 - https://www.learnrxjs.io/operators/combination/forkjoin.html