RxJs Quan sát - Xử lý 404 bằng cách phát ra giá trị mặc định

Question

tôi kêu gọi MS Graph để có được hình ảnh của người dùng:

// lets get the photo itself 
    let photo$ = this.graph.get$(`users/${id}/photo/$value`, ResponseContentType.Blob) 
     .map(resp => { 
      return new Blob([resp.blob()], { type: resp.headers.get['Content-Type']}); }) 
     .map(photo => { 
      let urlCreator = window.URL; 
      return this.sanitizer 
       .bypassSecurityTrustUrl(urlCreator.createObjectURL(photo)); 
     }) 
     .catch(function (e) { 
      if(e.status === 404) { 
       // no photo for this user! 
       console.log(`No photo for user ${id}! Returning default...`); 
       return undefined; 
      } 
     }) 
     .toPromise(); 

Tuy nhiên nhiều người dùng không có một bức ảnh. Trong trường hợp đó, điều tôi muốn làm là tạo một URL đối tượng cho một số ảnh mặc định (một trong số these có lẽ) và phát ra nó từ Đài quan sát. Hoặc thậm chí chỉ phát ra một số undefined từ Đài quan sát, mà tôi có thể xử lý ở giao diện người dùng bằng cách hiển thị một số hình ảnh mặc định.

Tôi biết rằng bắt tôi được bắn, bởi vì tôi thấy điều này trong trình duyệt giao diện điều khiển:

No photo for user xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx! Returning default... (output redacted)

Tôi thực sự kéo theo nhiều bit dữ liệu khác nhau cho mỗi người dùng, mỗi trong Quan sát riêng của mình. Sau đó tôi chuyển đổi từng Quan sát thành Lời hứa, và sau đó thực hiện một số Promise.all() trên tất cả chúng.

// let's pull all of this together to form a ConcreteUser 
    return Promise.all([photo$, ...]) 
     .then(values => { 
      const photo = values[0]; 
      ... 

Sự cố trong trường hợp 404 cho ảnh của người dùng, toàn bộ số Promise.all bị hủy và tôi không thể truy xuất người dùng.

Tôi đã thử phát hiện lỗi trong số photo$ quan sát và phát ra undefined (mà tôi dự định xử lý sau), nhưng dường như không làm những gì tôi muốn.

Làm cách nào để xử lý 404 trong Đài quan sát ở đây và phát ra thứ gì đó khác (có lẽ là undefined) thay vì giết người quan sát?

Answer 1

Tôi nghĩ rằng tôi có thể đã tìm ra điều này. Một gợi ý vẫn còn lẩn khuất trong trình duyệt giao diện điều khiển ...

TypeError: You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

Đọc RxJs documentation on error handling cho thấy họ làm những gì tôi đang cố gắng để làm, vì vậy tôi có một chút bối rối của thành viên này. Nhưng sau đó tôi nhận thấy rằng trong tài liệu, họ gọi một chức năng bí ẩn getCachedVersion() mà tôi giả định trả lại một điều thực tế được lưu trữ. Tuy nhiên, nếu họ thay vì trả lại một số Observable.of() một số nội dung được lưu trong bộ nhớ cache thực tế, thì điều đó có thể giải thích được.

Khi tôi thay đổi mã bắt tôi để:

 .catch(function (e) { 
      if(e.status === 404) { 
       // no photo for this user! 
       console.log(`No photo for user ${id}! Returning default...`); 
       return Observable.of(undefined); 
      } 
     }) 

... tất cả bắt đầu làm việc.