Lỗi bắt gặp trong đường ống kết hợp của các toán tử rxjs lờ mờ

Question

Chúng tôi vừa nâng cấp một trong các ứng dụng của mình lên Angular 5 và bắt đầu chuyển đổi thành lettable operators như được giới thiệu trong rxjs v5.5.

Vì lý do này, chúng tôi đã viết lại các đường ống quan sát được của chúng tôi theo cú pháp mới với toán tử .pipe().

Mã trước đó của chúng tôi sẽ trông giống như thế này, với một số .catch() bên trong .switchMap() để không làm gián đoạn hoạt động của hiệu ứng nếu xảy ra lỗi.

@Effect() 
loadData$ = this.actions$ 
.ofType(LOAD_DATA) 
.map((action: LoadData) => action.payload) 
.withLatestFrom(this.store.select(getCultureCode)) 
.switchMap(([payload, cultureCode]) => this.dataService.loadData(payload, cultureCode) 
    .map(result => { 
    if (!result) { 
     return new LoadDataFailed('Could not fetch data!'); 
    } else { 
     return new LoadDataSuccessful(result); 
    } 
    }) 
    .catch((err, caught) => { 
    return Observable.empty(); 
    }); 
); 

Trong trường hợp của một lỗi ném vào các cuộc gọi đến dataService nó sẽ bị bắt và xử lý (giản thể các lỗi xử lý ở đây).

Với cú pháp mới, sử dụng .pipe(), bây giờ chúng tôi có điều này

@Effect() 
loadData$ = this.actions$ 
.ofType(LOAD_DATA) 
.pipe(
    map((action: LoadData) => action.payload), 
    withLatestFrom(this.store.select(getCultureCode)), 
    switchMap(([payload, cultureCode]) => this.dataService.loadData(payload, cultureCode)), 
    map(result => { 
    if (!result) { 
     return new LoadDataFailed('Could not fetch data!'); 
    } else { 
     return new LoadDataSuccessful(result); 
    } 
    }) 
); 

Làm thế nào tôi trong một thời trang tương tự có thể bắt bất kỳ lỗi nào ném vào đường ống quan sát, sử dụng cú pháp mới?

Answer 1

Sau khi tái cấu trúc, bạn đã di chuyển map ra khỏi switchMap phép chiếu, do đó, mọi lỗi sẽ đóng luồng ngoài. Để giữ cho cả hai dòng tương đương, bạn cần phải sử dụng pipe trong chiếu bản thân như thế:

@Effect() 
loadData$ = this.actions$ 
.ofType(LOAD_DATA) 
.pipe(
    map((action: LoadData) => action.payload), 
    withLatestFrom(this.store.select(getCultureCode)), 
    switchMap(([payload, cultureCode]) => 
    this.dataService.loadData(payload, cultureCode) 
     .pipe(
     map(result => { 
      if (!result) { 
      return new LoadDataFailed('Could not fetch data!'); 
      } else { 
      return new LoadDataSuccessful(result); 
      } 
      }), 
     catchError((err, caught) => { 
      return Observable.empty(); 
     }) 
    ) 
) 
);