2016-03-14 14 views
5

Tôi mới trong lập trình phản ứng và tôi mất một chút khi đọc tất cả các bài viết mà tôi không thể hiểu được.Lập trình phản ứng với Javascript

Thực ra, tôi là nhà phát triển javascript từ Nodejs, Angularjs, Angular 2 và React.

Những gì tôi làm

tôi sử dụng những lời hứa tất cả các thời gian, cho quyến rũ từ xa dữ liệu, độ phân giải async địa phương vv ... testability Tốt hơn so với callbacks và phù hợp với nhu cầu của tôi.

Những gì tôi hiểu bằng con suối

tôi không thể tìm ra nơi con suối có thể tiết kiệm cho tôi trừ một trường hợp cụ thể.

Trường hợp đặc biệt này, là tôi không thể sử dụng lời hứa trong khi nghe trên luồng vì lời hứa sẽ chỉ được giải quyết một lần.

Một ví dụ với SocketIo:

io.on('connection', (socket) => { 
    // this works 
}); 

io.on('connection').then((socket) => { 
    // this can't work, promise would be resolved only once 
}); 

Nếu tôi m không sai, tôi có thể sử dụng các luồng phản ứng để quản lý trường hợp này bằng cách đơn giản trả lại một quan sát được. Đúng ?

Những gì tôi không hiểu

tôi đang nghiên cứu kiễu góc 2 và tất cả những thứ xung quanh. Trên thực tế, từ nhiều blog, mọi người sử dụng để sử dụng các quan sát để lấy dữ liệu từ xa và tôi không thể hiểu những gì có thể là một lợi thế của việc sử dụng nó thay vì lời hứa.

Thực tế là tôi sẽ cần phải thực hiện một điều khiển từ xa như trong cả hai trường hợp, vậy tại sao nhiều hơn cái kia? Đây có phải là vấn đề về hiệu suất không?

Những gì tôi cần

Nếu bạn đã đọc toàn bộ câu hỏi, những gì tôi cần là phải hiểu những ưu điểm của việc sử dụng chương trình phản ứng thay vì những lời hứa trong trường hợp của dữ liệu từ xa lấy được gì?

Trong trường hợp nào (các trường hợp khác), tốt hơn là nên sử dụng công cụ phản ứng hơn so với thông thường?

+0

đọc vấn đề này, sẽ làm rõ nhiều https: // github .com/góc/góc/số/5876 –

Trả lời

3

Về cơ bản nếu bạn có một sự kiện không đồng bộ đơn lẻ, bạn sẽ không được thông báo về (gọi lại) bạn sử dụng Promise. Nếu bạn mong đợi một loạt các sự kiện sử dụng Observable

Ưu điểm của Observable qua Promise

  • Quan sát có thể bị hủy bỏ
  • Quan sát là lười biếng (không làm bất cứ điều gì trước khi đăng ký)
  • Quan sát lon làm những gì Promise có thể nhưng chỉ sử dụng Observable cho phép bạn mã theo cùng một cách (sử dụng toán tử rx thay vì .then() bất kể bạn có mong đợi một hoặc một chuỗi sự kiện hay không.
+0

Xin chào! Tôi biết rằng đây là một câu trả lời cũ, nhưng có một điều mà tôi có lẽ không rõ ràng. Các bộ quan sát có thể giữ lại giá trị trả lại cho người đăng ký sau, tương tự như lời hứa đã được giải quyết sẽ là '.then()' d ngay lập tức không? Ngoài ra, bạn có thể có nhiều người đăng ký có thể quan sát được mà không ảnh hưởng đến hoạt động của nó (ví dụ: thực hiện cuộc gọi không đồng bộ hai lần) Nếu bạn nghĩ rằng xứng đáng với câu hỏi của riêng tôi, tôi có thể làm như vậy. – Katana314

+0

'BehaviorSubject' tạo ra một' Observable' mà trả về giá trị cuối cùng ngay lập tức cho các thuê bao mới. Toán tử '.share()' tạo một multicast 'Observable' và mỗi sự kiện được truyền cho mỗi người đăng ký. Lưu ý - bạn cần nhập các toán tử một cách rõ ràng (như 'map',' share', ...). –

6

@ Günter cung cấp cho bạn nền tảng của các quan sát đặc biệt là khả năng hứa hẹn sẽ được gọi.

Để đi một chút nữa, tôi nghĩ rằng lợi thế quan trọng của quan sát là khả năng xây dựng một luồng dữ liệu không đồng bộ/suối sử dụng khai thác.

Dưới đây là một số trường hợp sử dụng cụ thể:

  • debounceTime/switchMap. Khi bạn muốn tận dụng đầu vào biểu mẫu để lọc danh sách dựa trên các yêu cầu HTTP tương ứng, giá trị bạn cần sử dụng cho yêu cầu là giá trị mà người dùng đã hoàn thành để viết. Nó không cần phải gửi nhiều yêu cầu: một cho mỗi nhân vật mới (một cho s ', một cho 'để', một cho 'som', ..., một cho 'một cái gì đó để tìm kiếm'). Toán tử debounceTime cho phép điều này bằng các sự kiện đệm và cung cấp sự kiện cuối cùng sau một khoảng thời gian không hoạt động.

    Đây là một mẫu:

    @Component({ 
        (...) 
        template: ` 
        <input [ngFormControl]="ctrl"/> 
        ` 
    }) 
    export class MyComponent { 
        constructor() { 
        this.ctrl = new Control(); 
        this.ctrl.valueChanges 
           .debounceTime(500) 
           .distinctUntilChanged() 
           .switchMap((vallue: string) => { 
           // Get data according to the filled value 
           return this.service.getData(entry); 
           }) 
           .subscribe(data => { 
           // Update the linked list 
           this.list = data; 
           }); 
        } 
    } 
    

    Nếu bạn chỉ sử dụng switchMap, bạn sẽ có một yêu cầu cho mỗi đầu vào nhưng trước theo tiến độ yêu cầu sẽ bị hủy. Điều này cho phép bạn nhận được kết quả chính xác, đặc biệt là nếu thời gian thực hiện yêu cầu dài hơn đối với một số yêu cầu.

    Trong trường hợp này, bạn có thể liên kết sự kiện này từ giao diện người dùng Web (sự kiện DOM) để yêu cầu HTTP để thực hiện cho phù hợp (phản ứng trên các sự kiện) và áp dụng một số hành vi tiên tiến.

  • Thực hiện retry. Bằng cách trộn retryWhen, delaytimeout nhà khai thác, bạn có thể dễ dàng (và minh bạch) thực hiện lần thử lại

    searchPlaces(searchText:string) { 
        var params = new URLSearchParams(); 
        params.set('placename_startsWith', searchText); 
        params.set('username', 'templth'); 
    
        return this.http.get('http://api.geonames.org/postalCodeSearchJSON', 
         { search: params }) 
        .retryWhen(error => error.delay(500)) 
        .timeout(2000, return new Error('delay exceeded')) 
        .map(res => res.json().postalCodes); 
    } 
    

Tôi nghĩ rằng đây là sức mạnh thực sự của quan sát: chuỗi chế biến không đồng bộ/dữ liệu lưu lượng và liên kết các phần khác nhau của ứng dụng dựa trên sự kiện. Đó là điều không thể thực hiện với lời hứa và cho phép triển khai các trường hợp sử dụng để làm cho ứng dụng của bạn mạnh mẽ hơn.

Đây là một loạt các bài báo mà có thể cung cấp cho bạn biết thêm chi tiết:

Các vấn đề liên quan