Xử lý lỗi với ống không đồng bộ Angular2

Question

Tôi đang sử dụng ống không đồng bộ Angular2 để truyền các giá trị vào DOM. Dưới đây là một ví dụ đơn giản thực:

const stream = Observable.interval(1000) 
    .take(5) 
    .map(n => { if (n === 3) throw "ERROR"; return n; }); 

<div *ngFor="for num of stream | async"> 
    {{num}} 
</div> 

<div id="error"></div> 

Những gì tôi muốn làm là phải có trình tự của 1-5 hiển thị, nhưng vào mục lỗi (3), bằng cách nào đó cư div #error với thông báo lỗi.

Điều này dường như đòi hỏi hai điều: đầu tiên là khả năng của ống không đồng bộ góc để làm điều gì đó thông minh với các lỗi, mà tôi thấy không có dấu hiệu. Nhìn vào mã nguồn, rõ ràng nó ném một ngoại lệ JS, mà dường như không quá thân thiện.

Thứ hai là khả năng khởi động lại hoặc tiếp tục chuỗi sau lỗi. Tôi đã đọc về catch và onErrorResumeNext, v.v. nhưng tất cả đều liên quan đến một chuỗi khác sẽ bị chuyển sang lỗi. Điều này làm phức tạp logic của việc tạo luồng, mà trên đó tôi chỉ muốn đặt một chuỗi các số (trong ví dụ đơn giản này). Tôi có cảm giác chìm mà một khi một lỗi xảy ra trò chơi kết thúc và quan sát được hoàn thành và chỉ có thể được "khởi động lại" với một quan sát khác nhau. Tôi vẫn đang học quan sát; điều này có đúng không?

Vì vậy, câu hỏi của tôi có hai phần:

1. ống async Angular2 của thể làm điều gì đó thông minh với các lỗi?
2. Quan sát có một số cách đơn giản để tiếp tục sau khi có lỗi không?

Answer 1

Có bạn nói đúng về việc điều hành bắt và khả năng để làm điều gì đó sau khi lỗi xảy ra ...

tôi sẽ tận dụng các nhà điều hành catch để bắt lỗi và làm điều gì đó:

const stream = Observable.interval(1000) 
    .take(5) 
    .map(n => { 
    if (n === 3) { 
     throw Observable.throw(n); 
    } 
    return n; 
    }) 
    .catch(err => { 
    this.error = error; 
    (...) 
    }); 

và trong mẫu:

<div>{{error}}</div> 

Để có thể đi trên quan sát ban đầu, bạn cần phải tạo một cái mới bắt đầu từ thời điểm xảy ra lỗi:

createObservable(i) { 
    return Observable.interval(1000) 
    .range(i + 1, 5 - i) 
    .take(5 - i) 
    }); 
} 

và sử dụng nó trong catch callback:

.catch(err => { 
    this.error = error; 
    return this.createObservable(err); 
    }); 

Hai câu hỏi có thể giúp bạn:

• How to resumeOnError (or similar) in RxJS5
• RxJS Continue Listening After Ajax Error (câu trả lời cuối cùng)

Answer 2

1) không, async đăng ký ống và hủy đăng ký và trả lại sự kiện nhận được. Bạn sẽ cần xử lý các lỗi trước khi nhận được đường ống async.

2) Bạn có thể sử dụng toán tử bắt và khi nó trả về một giá trị quan sát thì giá trị của nó được phát ra bởi số .catch(err => Observable.of(-1)) thay vì lỗi.

Bạn có thể sử dụng giá trị này để phát ra giá trị "lỗi" đặc biệt và sau đó sử dụng giá trị như *ngIf="num === -1 để hiển thị giá trị lỗi theo một số cách đặc biệt.

Bạn có thể tìm thêm thông tin về vấn đề này https://blog.thoughtram.io/angular/2017/02/27/three-things-you-didnt-know-about-the-async-pipe.html