Dữ liệu cần thiết của ứng dụng kh&ocirc;ng phải l&uacute;c n&agrave;o cũng c&oacute; sẵn. Đ&oacute; l&agrave; l&uacute;c ta cần d&ugrave;ng JavaScript Promise v&agrave; JavaScript Observable.&nbsp;
C&aacute;c ứng dụng hiện nay đều cần c&oacute; một cơ chế phản ứng, tức l&agrave; nhận biết được sự thay đổi dữ liệu v&agrave; c&aacute;c cập nhật từ h&agrave;nh vi của người d&ugrave;ng v&agrave; phản ứng sao cho ph&ugrave; hợp. C&oacute; hai c&aacute;ch để triển khai cơ chế n&agrave;y v&agrave; bạn cần lựa chọn giữa JavaScript Promise v&agrave; JavaScript Observable.
B&agrave;i viết h&ocirc;m nay sẽ cung cấp kiến thức về hai kh&aacute;i niệm tr&ecirc;n v&agrave; hướng dẫn c&aacute;ch lựa chọn ra c&aacute;ch tiếp cận ph&ugrave; hợp t&ugrave;y theo trường hợp.
Đầu ti&ecirc;n, với c&acirc;u hỏi phương ph&aacute;p n&agrave;o l&agrave; tối ưu hơn - JavaScript Promise hay JavaScript Observable - c&acirc;u trả lời l&agrave; kh&ocirc;ng c&aacute;i n&agrave;o cả. Điều n&agrave;y ho&agrave;n to&agrave;n phụ thuộc v&agrave;o trường hợp sử dụng. Bạn c&oacute; thể cảm thấy thất vọng nhưng hiện thực vốn khắc nghiệt m&agrave; (Thanos - The Mad Titan). Ch&iacute;nh v&igrave; thế, bạn n&ecirc;n tư duy theo c&aacute;ch l&agrave;m thế n&agrave;o để &aacute;p dụng phương ph&aacute;p ph&ugrave; hợp với một t&igrave;nh huống cụ thể, thay v&igrave; cố gắng chọn một c&aacute;ch tốt nhất để &aacute;p dụng cho tất cả.
Trước hết, h&atilde;y c&ugrave;ng kh&aacute;m ph&aacute; định nghĩa JavaScript Promise v&agrave; JavaScript Observable, sau đ&oacute; học c&aacute;ch nhận biết khi n&agrave;o th&igrave; n&ecirc;n d&ugrave;ng phương ph&aacute;p n&agrave;o. 
<h2 style="text-align: justify;">1. Định nghĩa Promise&nbsp;</h2>
Promise l&agrave; lời hứa. Khi bạn hứa l&agrave;m điều g&igrave; đ&oacute;, bạn sẽ l&agrave;m n&oacute; ngay khi c&oacute; thể.
V&iacute; dụ, bạn tự hứa với bản th&acirc;n l&agrave; sẽ tập gym để giảm c&acirc;n n&ecirc;n sẽ dừng việc ăn vặt lại.
<h2 style="text-align: justify;">2. C&aacute;i g&igrave;/Ai l&agrave; người quan s&aacute;t</h2>
Observer l&agrave; người quan s&aacute;t những thay đổi v&agrave; b&aacute;o c&aacute;o lại cho b&ecirc;n li&ecirc;n quan.
Bạn c&oacute; thể tự theo d&otilde;i c&acirc;n nặng của m&igrave;nh v&agrave; đ&aacute;nh dấu những ng&agrave;y đến ph&ograve;ng tập gym để ghi lại những thay đổi về c&acirc;n nặng, sau đ&oacute; t&iacute;nh chỉ số BMR.
&Aacute;p dụng những kiến thức tr&ecirc;n v&agrave;o JavaScript:
<h2 style="text-align: justify;">1. JavaScript promise</h2>
JavaScript promise l&agrave; lời hứa rằng một khi dữ liệu được cung cấp, bạn sẽ chuyển dữ liệu cho b&ecirc;n được cam kết v&agrave; thực hiện promise đ&oacute;. Điều n&agrave;y chỉ được thực hiện một lần.
<h2 style="text-align: justify;">2. JavaScript observable</h2>
JavaScript observable l&agrave; cam kết rằng bạn sẽ lu&ocirc;n chuyển dữ liệu cho b&ecirc;n quan s&aacute;t mỗi khi dữ liệu được cung cấp. Tuy nhi&ecirc;n, khả năng cung cấp dữ liệu cho b&ecirc;n được ghi lại sẽ được duy tr&igrave; cho đến khi dữ liệu kh&ocirc;ng c&ograve;n cần thiết nữa.
Sau khi hiểu được định nghĩa, ch&uacute;ng ta sẽ c&ugrave;ng xem x&eacute;t v&iacute; dụ minh họa c&ugrave;ng code.
<h3 style="text-align: justify;">V&iacute; dụ sử dụng JavaScript promise</h3>
Giả sử bạn cần đăng nhập v&agrave;o phi&ecirc;n người d&ugrave;ng, khi người d&ugrave;ng đăng nhập v&agrave;o t&agrave;i khoản, họ sẽ thấy xuất hiện th&ocirc;ng b&aacute;o ch&agrave;o mừng. Ta c&oacute; thể sử dụng một promise đơn giản như sau:
<pre class="language-python"><code>/**
*
* @param email
* @param password
*
* login user using their email and password
*/
function loginUser(
 email: string,
 password: string
) {
 const resource = new Request(`https://your-backend-endpoint/login`)
 const formData = new FormData();
 formData.set('email', email);
 formData.set('password', password);
 return fetch(resource, {method: 'POST', mode: 'cors', body: formData}).then(
 response =&gt; {
 if (!response.ok) {
 return Promise.reject('Invalid credentials!');
 }
 return response.json();
 }
 ).then(response =&gt; {
 return Promise.resolve(response);
 })
}

/**
*
* @param email
* @param password
*
* hypothetically, when the user clicks the login button, pass in the value for
* email and password.
*/
function doLogin(email: string, password: string) {
 loginUser(email, password).then(res =&gt; {
 alert(`Hi there ${res.fullName}`)
 }).catch(err =&gt; {
 alert('Oooops! Invalid credentials provided')
 });
}
</code></pre>
<h3 style="text-align: justify;">V&iacute; dụ sử dụng JavaScript observable</h3>
Khi đăng nhập, người d&ugrave;ng th&ecirc;m th&ocirc;ng tin kh&aacute;ch h&agrave;ng tiềm năng v&agrave;o ứng dụng như số điện thoại, sau đ&oacute; hiển thị tr&ecirc;n giao diện người d&ugrave;ng. Giao diện người d&ugrave;ng sẽ ghi lại những số điện thoại được nhập v&agrave; li&ecirc;n tục cập nhật những thay đổi.
<pre class="language-python"><code>ctor: 'app-leads-component'
})
export class LeadsComponent {

 /**
 * A list of leads
 */
 private _myLeads: Array;

 /**
 * A BehaviourSubject is an observable which is imported from RXJS.
 *
 * It makes it possible to populate your initial data, with something
 * which you can present to the UI, and have it updated with time.
 */
 public myLeads$: BehaviourSubject&gt; = new BehaviourSubject&gt;([]);

 constructor(
 private _yourBackendService: YourBackendService
 ) {}

 /**
 * when the component intialized
 */
 ngOnInit() {
 this._listenForLeadsFromBackend();
 }

 /**
 * listen for the list of leads user currently has in their backend,
 * and this will fetch the leads only once when the component is
 * initialized.
 *
 * IF you want to have the event for new leads from the backend, then in
 * that case, you will have to go the WebSocket way, which is out of the scope of this tutorial
 */
 private _listenForLeadsFromBackend(): void {
 this._yourBackendService.getLeads().subscribe(
 /**
 *
 * @param leads
 *
 * here, update the list of your leads with the received leads from the server
 * then set the next value for myLeads$ to your _myLeads
 */
 (leads: Array) =&gt; {
 this._myLeads = leads;
 this.updateMyLeadsObservable();
 }
 )
 }


 /**
 *
 * @param number
 * @param name
 *
 * add a lead number by inputting it and then updating on the UI all
 * the leads
 */
 public addCustomerLeadNumber(number: string, name: string) {
 this._myLeads.push(new Lead(number, name));
 this.updateMyLeadsObservable();
 }

 /**
 * common method for updating my leads observable
 */
 public updateMyLeadsObservable(): void {
 this.myLeads$.next(this._myLeads);
 }
}
</code></pre>
C&oacute; thể thấy JavaScript observable thường được &aacute;p dụng cho c&aacute;c t&iacute;nh năng reactive programming cần thiết, mặc d&ugrave; code d&agrave;i hơn ch&uacute;t.&nbsp;
<h2 style="text-align: justify;">Kết luận</h2>
Lần sau khi thao t&aacute;c với reactive programming, bạn kh&ocirc;ng n&ecirc;n nghĩ xem c&aacute;ch tiếp cận n&agrave;o l&agrave; tốt nhất m&agrave; h&atilde;y &aacute;p dụng t&ugrave;y theo trường hợp.
B&agrave;i viết n&agrave;y chỉ cung cấp những kiến thức căn bản về JavaScript promise v&agrave; JavaScript observable, bạn c&oacute; thể tham khảo th&ecirc;m nhiều b&agrave;i viết kh&aacute;c để t&igrave;m hiểu s&acirc;u hơn về c&aacute;c phương thức lập tr&igrave;nh phản ứng n&agrave;y.&nbsp;
Ch&uacute;c bạn th&agrave;nh c&ocirc;ng!

Admin

JavaScript Promise vs. JavaScript Observable

Cùng tác giả

Admin

Có liên quan