ข้อมูลเบื้องต้นเกี่ยวกับ Observables และวิธีที่แตกต่างจากคำสัญญา

' Observables ', ' Observables ', ' Observables ' ... ใช่! วันนี้เราจะพูดถึงคำพูดของตลาดนี้ นอกจากนี้เรายังจะได้เรียนรู้ว่าพวกเขาแตกต่างจากคำสัญญาอย่างไร (ไม่เคยได้ยินเกี่ยวกับคำสัญญาไม่ต้องกังวล! คุณจะรู้เพิ่มเติมเร็ว ๆ นี้) เริ่มกันเลย!

ฉันพบคำว่าObservableเป็นครั้งแรกเมื่อฉันเริ่มเรียนรู้ Angular แม้ว่าจะไม่ใช่คุณสมบัติเฉพาะเชิงมุม แต่ก็เป็นวิธีใหม่ในการจัดการไม่ตรงกันคำขอ คำขอ Async? คุณรู้ใช่มั้ย? ไม่! ไม่เป็นไร. ก่อนอื่นเรามาทำความเข้าใจว่าคำขอasyncคืออะไร

คำขอ Async

ดี! คุณต้องอ่านเกี่ยวกับคุณลักษณะแบบอะซิงโครนัสในโลก JavaScript ' อะซิงโครไนซ์ ' ในโลกคอมพิวเตอร์หมายความว่าโฟลว์ของโปรแกรมเกิดขึ้นอย่างอิสระ ไม่รอให้งานเสร็จสิ้น ย้ายไปยังงานถัดไป

ตอนนี้คุณอาจกำลังคิดว่าจะเกิดอะไรขึ้นกับงานที่ยังไม่เสร็จสิ้น? เพื่อนร่วมงานจะจัดการกับงานที่ยังไม่เสร็จ ใช่ ในเบื้องหลังเพื่อนร่วมงานจะทำงานและจัดการงานที่ยังไม่เสร็จเหล่านั้นและเมื่อทำเสร็จแล้วจะส่งข้อมูลกลับ

สิ่งนี้อาจทำให้เกิดคำถามขึ้นอีกว่าเราจัดการกับข้อมูลที่ส่งคืนอย่างไร คำตอบคือสัญญา , observables , เรียกกลับและอื่น ๆ อีกมากมาย

เราทราบดีว่าการดำเนินการแบบอะซิงโครนัสเหล่านี้ส่งคืนการตอบสนองไม่ว่าจะเป็นข้อมูลบางส่วนหลังจากสำเร็จหรือเกิดข้อผิดพลาด การจัดการนี้แนวคิดเช่นสัญญา , เรียกกลับ , observablesเข้ามาในตลาด ดี! ฉันจะไม่เข้าไปในพวกเขาในตอนนี้เนื่องจากเราได้เบี่ยงเบนไปจากหัวข้อย่อยของเราเช่นคำขอ ' async ' (ไม่ต้องกังวลหัวข้อเหล่านี้จะถูกพูดถึงในไม่ช้า)

หลังจากพูดถึงประเด็นข้างต้นแล้วคุณอาจได้ภาพคร่าวๆว่าคำขอasyncคืออะไร มาเคลียร์กัน Asyncคำขอเป็นหนึ่งที่ลูกค้าไม่รอให้การตอบสนอง ไม่มีสิ่งใดปิดกั้น มาทำความเข้าใจกับแนวคิดนี้โดยดูสถานการณ์ที่พบบ่อย

ในโลกของเว็บเป็นเรื่องปกติที่จะเข้าสู่เซิร์ฟเวอร์เพื่อรับข้อมูลเช่นรายละเอียดของผู้ใช้รายการและอื่น ๆ เรารู้ว่าต้องใช้เวลาและทุกอย่างจะตามมา (ความสำเร็จ / ล้มเหลว)

กรณีนี้แทนที่จะรอให้ข้อมูลมาเราจัดการแบบอะซิงโครนัส (ไม่ต้องรอ) เพื่อไม่ให้แอปพลิเคชันของเราถูกบล็อก คำขอดังกล่าวเป็นคำขอแบบอะซิงโครนัส ฉันคิดว่าตอนนี้เราชัดเจนกับมันแล้ว มาดูกันว่าเราจะจัดการกับคำขอไม่ซิงค์เหล่านี้ได้อย่างไร

ดังที่ฉันได้บอกคุณไปแล้ว Observables ทำให้เรามีวิธีใหม่ในการจัดการคำขอไม่ซิงค์ วิธีอื่น ๆ คือสัญญาการโทรกลับและ async / await วิธีเหล่านี้เป็นวิธียอดนิยม ลองมาดูสองคนซึ่งเป็นการโทรกลับและสัญญา

การโทรกลับ

การโทรกลับเป็นเรื่องปกติ ฟังก์ชันการโทรกลับ (ตามชื่อที่แนะนำ) จะถูกเรียกที่ด้านหลัง นั่นคือเมื่อการร้องขอเสร็จสมบูรณ์และส่งคืนข้อมูลหรือข้อผิดพลาดฟังก์ชันเหล่านี้จะถูกเรียก ดูรหัสเพื่อความเข้าใจที่ดีขึ้น:

const request = require(‘request’); request('//www.example.com', function (err, response, body) { if(error){ // Error handling } else { // Success } });

นี่เป็นวิธีหนึ่งในการจัดการคำขอ async แต่จะเกิดอะไรขึ้นเมื่อเราต้องการขอข้อมูลไปยังเซิร์ฟเวอร์อีกครั้งหลังจากความสำเร็จของคำขอแรก จะเป็นอย่างไรหากเราต้องการส่งคำขอครั้งที่สามหลังจากคำขอครั้งที่สองสำเร็จ สยอง!

เมื่อถึงจุดนี้รหัสของเราจะยุ่งเหยิงและอ่านได้น้อยลง สิ่งนี้เรียกว่า ' นรกเรียกกลับ ' เพื่อเอาชนะมันคำสัญญาเกิดขึ้น พวกเขาเสนอวิธีที่ดีกว่าในการจัดการคำขอ async ที่ช่วยเพิ่มความสามารถในการอ่านโค้ด มาทำความเข้าใจกันมากขึ้น

สัญญา

คำสัญญาคือวัตถุที่สัญญาว่าพวกเขาจะมีค่าในอนาคตอันใกล้ไม่ว่าจะเป็นความสำเร็จหรือความล้มเหลว สัญญามีวิธีการของตัวเองซึ่ง ได้แก่แล้วและจับ จากนั้น ()ถูกเรียกเมื่อความสำเร็จมาถึงมิฉะนั้นจะเรียกใช้เมธอด   catch () สัญญาถูกสร้างขึ้นโดยใช้ตัวสร้างสัญญา ดูรหัสเพื่อทำความเข้าใจให้ดีขึ้น

function myAsyncFunction(name){ return new Promise(function(resolve, reject){ if(name == ‘Anchal’){ resolve(‘Here is Anchal’) } else{ reject(‘Oops! This is not Anchal’) } } } myAsyncFunction(‘Anchal’) .then(function(val){ // Logic after success console.log(val) // output - ‘Here is Anchal’ }) .catch(function(val){ //Logic after failure console.log(val) // output - ‘Oops! This is not Anchal’ })

อย่างที่คุณเห็นmyAsyncFunctionสัญญาว่าจะมีคุณค่าในอนาคตอันใกล้นี้ .then ()หรือ . catch ()เรียกตามสถานะของสัญญา

สัญญาปรับปรุงรหัสการอ่าน คุณสามารถดูว่าโค้ดอ่านได้เพียงใดโดยใช้คำสัญญา การจัดการ async ที่ดีขึ้นสามารถทำได้โดยใช้สัญญา นี่คือคำแนะนำสั้น ๆ ว่าสัญญาคืออะไรพวกเขาจัดการกับข้อมูลอย่างไรและคำสัญญาด้านความงามมีอะไรบ้าง

ตอนนี้ถึงเวลาเรียนรู้เกี่ยวกับหัวข้อหลักของเรา: Observables

Observables คืออะไร?

Observables ยังเป็นเหมือนการเรียกกลับและคำสัญญาซึ่งรับผิดชอบในการจัดการคำขอ async Observables เป็นส่วนหนึ่งของไลบรารีRXJS ห้องสมุดแห่งนี้แนะนำ Observables

ก่อนที่จะทำความเข้าใจสิ่งที่สังเกตได้จริงคือคุณต้องเข้าใจทั้งสองรูปแบบการสื่อสาร: การดึงและผลักดัน แนวคิดทั้งสองนี้เป็นโปรโตคอลของวิธีการที่ผู้ผลิตข้อมูลสื่อสารกับผู้บริโภคข้อมูล

Pull & Push Model

ดังที่ฉันได้บอกคุณไปแล้ว Push and Pull เป็นโปรโตคอลการสื่อสารระหว่างผู้ผลิตข้อมูลและผู้บริโภค มาทำความเข้าใจทีละข้อ

ดึงรุ่นในรุ่นนี้ที่ผู้บริโภคของข้อมูลเป็นกษัตริย์ ซึ่งหมายความว่าผู้บริโภคข้อมูลจะกำหนดว่าต้องการข้อมูลจากผู้ผลิตเมื่อใด ผู้ผลิตไม่ได้ตัดสินใจว่าจะส่งข้อมูลเมื่อใด คุณสามารถเข้าใจได้ดีขึ้นว่าคุณเกี่ยวข้องกับฟังก์ชันหรือไม่

ดังที่เราทราบกันดีว่าฟังก์ชันมีหน้าที่รับผิดชอบในการทำงานบางอย่าง ตัวอย่างเช่นdataProducerเป็นฟังก์ชันที่ส่งคืนสตริงเช่น " Hi Observable "

function dataProducer(){ return ‘Hi Observable’; }

ตอนนี้คุณจะเห็นว่าฟังก์ชันข้างต้นจะไม่เป็นตัวตัดสินว่าเมื่อใดจะส่งสตริง "Hi Observable" ผู้บริโภคจะตัดสินใจนั่นคือรหัสที่เรียกใช้ฟังก์ชันนี้ ผู้บริโภคคือราชา สาเหตุที่เรียกว่า Pull Model คืองานดึงคือการกำหนดการสื่อสาร นี่คือที่ดึงรุ่น ตอนนี้ขอไปลงในการผลักดันรุ่น

ผลักดันรุ่นในรุ่นนี้ที่ผลิตของข้อมูลเป็นกษัตริย์ ผู้ผลิตกำหนดเวลาที่จะส่งข้อมูลไปยังผู้บริโภค ผู้บริโภคไม่ทราบว่าข้อมูลจะมาเมื่อใด มาทำความเข้าใจกันโดยยกตัวอย่าง:

ฉันหวังว่าคุณจำสัญญา ใช่สัญญาตามการผลักดันรูปแบบ  สัญญา (ผู้ผลิต) ส่งข้อมูลไปยังการติดต่อกลับ ( .then () - ผู้บริโภค) การโทรกลับไม่ทราบว่าข้อมูลจะมาเมื่อใด ที่นี่สัญญา (โปรดิวเซอร์) คือราชา เป็นการกำหนดการสื่อสาร นั่นเป็นเหตุผลที่เรียกว่าPush Modelในฐานะผู้อำนวยการสร้าง

เช่นเดียวกับคำสัญญา Observables ยังเป็นไปตามรูปแบบการผลักดัน อย่างไร? คุณจะได้รับคำตอบเมื่อฉันอธิบายสิ่งที่สังเกตได้อย่างละเอียด กลับไปที่สิ่งที่สังเกตได้แล้ว

Observables เป็นฟังก์ชัน

เพื่อให้เข้าใจง่าย ๆ คุณสามารถคิดว่าสิ่งที่สังเกตได้เป็นฟังก์ชัน ลองดูตัวอย่างด้านล่าง:

function dataProducer(){ return ‘Hi Observable’ } var result = dataProducer(); console.log(result) // output - ‘Hi Observable’ 

คุณสามารถรับพฤติกรรมเดียวกันได้โดยใช้สิ่งที่สังเกตได้:

var observable = Rx.Observable.create((observer: any) =>{ observer.next(‘Hi Observable’); }) observable.subscribe((data)=>{ console.log(data); // output - ‘Hi Observable’ })

จากด้านบนคุณจะเห็นทั้งฟังก์ชันและสิ่งที่สังเกตได้แสดงพฤติกรรมเดียวกัน สิ่งนี้อาจทำให้คุณเกิดคำถาม - สิ่งที่สังเกตได้เหมือนกับฟังก์ชันหรือไม่? ไม่ฉันจะชี้แจงในไม่กี่นาทีว่าทำไมคำตอบคือไม่ ดูตัวอย่างด้านบนในเวอร์ชันที่ซับซ้อน

function dataProducer(){ return ‘Hi Observable’; return ‘Am I understandable?’ // not a executable code. } var observable = Rx.Observable.create((observer: any) =>{ observer.next(‘Hi Observable’); observer.next( ‘Am I understandable?’ ); }) observable.subscribe((data)=>{ console.log(data); }) Output : ‘Hi Observable’ ‘Am I understandable?’ 

ฉันหวังว่าตอนนี้คุณจะเห็นความแตกต่างที่ฉันต้องการพูดถึง จากด้านบนคุณจะเห็นทั้งฟังก์ชั่นและ observables ขี้เกียจ เราจำเป็นต้องเรียกใช้ (ฟังก์ชั่น) หรือสมัครสมาชิก (ข้อสังเกต) เพื่อให้ได้ผลลัพธ์

Subscriptions to observables are quite similar to calling a function. But where observables are different is in their ability to return multiplevalues called streams (a stream is a sequence of data over time).

Observables not only able to return a value synchronously, but also asynchronously.

var observable = Rx.Observable.create((observer: any) =>{ observer.next(‘Hi Observable’); setTimeout(()=>{ observer.next(‘Yes, somehow understandable!’) }, 1000) observer.next( ‘Am I understandable?’ ); }) output : ‘Hi Observable’ ‘Am I understandable?’ Yes, somehow understandable!’. 

In short, you can say observables are simply a function that are able to give multiple values over time, either synchronously or asynchronously.

You now have an outline about observables. But let’s understand them more by looking into different phases of observables.

Observable Phases

We have already seen from the above example how observables create and execute and come into play by subscription. Hence, there are four stages through which observables pass. They are:

  1. Creation
  2. Subscription.
  3. Execution
  4. Destruction.

Creation of an observableis done using a createfunction.

var observable = Rx.Observable.create((observer: any) =>{ }) 

To make an observablework, we have to subscribe it. This can be done using the subscribe method.

observable.subscribe((data)=>{ console.log(data); })

Execution of observables is what is inside of the create block. Let me illustrate with the help of an example:

var observable = Rx.Observable.create((observer: any) =>{ observer.next(‘Hi Observable’); setTimeout(()=>{ observer.next(‘Yes, somehow understandable!’) }, 1000) observer.next( ‘Am I understandable?’ ); }) 

The above code inside the create function is observable execution. The three types of values that an observable can deliver to the subscriber are:

observer.next(‘hii’);//this can be multiple (more than one) observer.error(‘error occurs’) // this call whenever any error occus. Observer.complete(‘completion of delivery of all values’) // this tells the subscriptions to observable is completed. No delivery is going to take place after this statement.

Let’s have a look below to understand all three values:

var observable = Rx.Observable.create((observer: any) =>{ try { observer.next(‘Hi Observable’); setTimeout(()=>{ observer.next(‘Yes, somehow understandable!’) }, 1000) observer.next( ‘Am I understandable?’ ); observer.complete(); observer.next(‘lAST DELIVERY?’ ); // above block is not going to execute as completion notification is already sent. } catch(err){ observer.error(err); } }) 

Last phase that comes into the market is destruction. After an error or a complete notification, the observable is automatically unsubscribed. But there are cases where we have to manually unsubscribe it. To manually do this task, just use:

var subscription = observable.subscribe(x => console.log(x)); // Later: subscription.unsubscribe();

This is all about the different phases through which an observable passes.

I think, now, we know what observables are? But what about the other question which is - how observables are different from promises? Let’s find the answer to it.

Promises vs observables

As we know, promises are for handling async requests and observables can also do the same. But where do they differ?

Observables are lazy whereas promises are not

This is pretty self-explanatory: observables are lazy, that is we have to subscribe observables to get the results. In the case of promises, they execute immediately.

Observables handle multiple values unlike promises

Promises can only provide a single value whereas observables can give you multiple values.

Observables are cancelable

You can cancel observables by unsubscribing it using the unsubscribe method whereas promises don’t have such a feature.

Observables provide many operators

There are many operators like map, forEach, filter etc. Observables provide these whereas promises does not have any operators in their bucket.

These are features that makes observables different from promises.

Now, it's time to end. I hope you have a better understanding of the hot topic of observables!

Thanks for reading!