Bắt đầu với JavaScript Promise

Mã không đồng bộ rất hữu ích để thực hiện các nhiệm vụ mất thời gian nhưng, tất nhiên, nó không có khuyết điểm. Mã Async sử dụng chức năng gọi lại để xử lý kết quả của nó, tuy nhiên chức năng gọi lại không thể trả về giá trị các hàm JavaScript điển hình có thể.

Do đó, họ không chỉ lấy đi khả năng kiểm soát của chúng ta thực hiện chức năng nhưng cũng làm xử lý lỗi một chút rắc rối Đây là nơi Hứa vật đi vào, vì nó nhằm mục đích điền vào một số ổ gà trong mã hóa không đồng bộ.

Hứa về mặt kỹ thuật là một đối tượng nội bộ tiêu chuẩn trong JavaScript, có nghĩa là nó đến tích hợp sẵn với JavaScript. Nó được sử dụng để đại diện cho kết quả cuối cùng của một khối mã không đồng bộ (hoặc lý do tại sao mã không thành công) và có các phương thức để kiểm soát thực thi mã không đồng bộ.

Cú pháp

Chúng ta có thể tạo ra một ví dụ của Hứa vật sử dụng Mới từ khóa:

 Promise mới (chức năng (giải quyết, từ chối) ); 

Chức năng thông qua như một tham số để Hứa () constructor được gọi là chấp hành viên. Nó giữ mã không đồng bộ và có hai tham số của Chức năng kiểu, gọi là giải quyết và Từ chối các chức năng (nhiều hơn về những điều này trong thời gian ngắn).

Bang của Hứa vật

Các trạng thái ban đầu của một Hứa đối tượng được gọi là đang chờ xử lý. Ở trạng thái này, kết quả của tính toán không đồng bộ không tồn tại.

Trạng thái chờ xử lý ban đầu thay đổi thành hoàn thành trạng thái khi tính toán là thành công. Các kết quả tính toán có sẵn trong trạng thái này.

Trong trường hợp tính toán không đồng bộ thất bại, các Hứa đối tượng di chuyển đến từ chối trạng thái từ ban đầu của nó đang chờ xử lý tiểu bang. Ở trạng thái này, lý do của sự thất bại tính toán (tức là thông báo lỗi) được cung cấp.

Đi từ đang chờ xử lý đến hoàn thành tiểu bang, giải quyết() được gọi là. Đi từ đang chờ xử lý đến từ chối tiểu bang, Từ chối() được gọi là.

Các sau đó và bắt lấy phương pháp

Khi nhà nước thay đổi từ đang chờ xử lý đến hoàn thành, xử lý sự kiện của Hứa các đối tượng sau đó phương pháp được thực thi. Và, khi nhà nước thay đổi từ đang chờ xử lý đến từ chối, xử lý sự kiện của Hứa các đối tượng bắt lấy phương pháp được thực thi.

ví dụ 1

“Không được hứa hẹn” mã

Giả sử có một hello.txt tập tin chứa “xin chào” từ. Đây là cách chúng tôi có thể viết một yêu cầu AJAX tới lấy tập tin đó và hiển thị nội dung của nó, không sử dụng Hứa vật:

 hàm getTxt () let xhr = new XMLHttpRequest (); xhr.open ('NHẬN', 'hello.txt'); xhr.overrideMimeType ('văn bản / thuần túy'); xhr.send (); xhr.onload = function () thử switch (this.status) case 200: document.write (this.response); phá vỡ; trường hợp 404: ném 'Không tìm thấy tệp'; mặc định: ném 'Không thể tìm nạp tệp';  bắt (err) console.log (err);  getTxt (); 

Nếu nội dung của tập tin đã được lấy thành công, I E. mã trạng thái phản hồi là 200, văn bản trả lời là viết vào tài liệu. Nếu tập tin là không tìm thấy (trạng thái 404), một “Không tìm thấy tệp” thông báo lỗi được ném. Mặt khác, một thông báo lỗi chung cho thấy sự thất bại của việc tìm nạp tập tin bị ném.

“Hứa hẹn” mã

Bây giờ chúng ta hãy Quảng cáo mã trên:

 function getTxt () return new Promise (function (giải quyết, từ chối) let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) case 200: giải quyết (this.response); case 404: từ chối ('Không tìm thấy tệp'); default: từ chối ('Không thể tìm nạp tệp ');;);  getTxt (). then (function (txt) document.write (txt);). Catch (function (err) console.log (err);); 

Các getTxt () chức năng hiện được mã hóa thành trả về một thể hiện mới của Hứa vật, và hàm thực thi của nó giữ mã không đồng bộ từ trước.

Khi mà mã trạng thái phản hồi là 200, các Hứa Là hoàn thành bởi gọi giải quyết() (phản hồi được truyền dưới dạng tham số của giải quyết()). Khi mã trạng thái là 404 hoặc một số khác, Hứa Là từ chối sử dụng Từ chối() (với thông báo lỗi thích hợp là tham số của Từ chối()).

Các xử lý sự kiện cho sau đó() và bắt lấy() phương pháp của Hứa đối tượng là thêm vào cuối.

Khi mà Hứa Là hoàn thành, người xử lý sau đó() phương pháp được chạy. Đối số của nó là tham số được truyền từ giải quyết(). Bên trong trình xử lý sự kiện, văn bản phản hồi (nhận làm đối số) là viết vào tài liệu.

Khi mà Hứa Là từ chối, xử lý sự kiện của bắt lấy() phương thức được chạy, đăng nhập lỗi.

Các lợi thế chính của phiên bản được quảng cáo ở trên là xử lý lỗi. Thay vì ném các ngoại lệ không được phép xung quanh - như trong phiên bản Không được hứa hẹn - thông báo thất bại thích hợp được trả lại và đăng nhập.

Nhưng, nó không chỉ là trở về của tin nhắn thất bại mà còn của kết quả tính toán không đồng bộ đó có thể là thực sự thuận lợi cho chúng tôi. Để thấy điều đó, chúng ta sẽ cần mở rộng ví dụ của mình.

Ví dụ 2

“Không được hứa hẹn” mã

Thay vì chỉ hiển thị văn bản từ hello.txt, tôi muốn kết hợp nó với “Thế giới” từ và hiển thị nó trên màn hình sau khi hết thời gian 2 giây. Đây là mã tôi sử dụng:

 hàm getTxt () let xhr = new XMLHttpRequest (); xhr.open ('NHẬN', 'hello.txt'); xhr.overrideMimeType ('văn bản / thuần túy'); xhr.send (); xhr.onload = function () thử switch (this.status) case 200: document.write (concatTxt (this.response)); phá vỡ; trường hợp 404: ném 'Không tìm thấy tệp'; mặc định: ném 'Không thể tìm nạp tệp';  bắt (err) console.log (err);  hàm concatTxt (res) setTimeout (function () return (res + 'World'), 2000);  getTxt (); 

Trên mã trạng thái 200, concatTxt () chức năng được gọi là nối văn bản trả lời với “Thế giới” từ trước khi viết nó vào tài liệu.

Nhưng, mã này sẽ không làm việc như mong muốn. Các setTimeout () chức năng gọi lại không thể trả về chuỗi nối. Những gì sẽ được in ra tài liệu là chưa xác định bởi vì đó là gì concatTxt () trả lại.

“Hứa hẹn” mã

Vì vậy, để làm cho mã hoạt động, hãy Quảng cáo mã trên, kể cả concatTxt ():

 function getTxt () return new Promise (function (giải quyết, từ chối) let xhr = new XMLHttpRequest (); xhr.open ('GET', 'hello.txt'); xhr.overrideMimeType ('text / plain'); xhr.send (); xhr.onload = function () switch (this.status) case 200: giải quyết (this.response); case 404: từ chối ('Không tìm thấy tệp'); default: từ chối ('Không thể tìm nạp tệp ');;);  hàm concatTxt (txt) return new Promise (function (giải quyết, từ chối) setTimeout (function () giải quyết (txt + 'World');, 2000););  getTxt (). then ((txt) => return concatTxt (txt);). then ((txt) => document.write (txt);). Catch ((err) => console. log (err);); 

Giống như getTxt (), các concatTxt () chức năng cũng trả lại một cái mới Hứa vật thay vì văn bản nối. Các Hứa trở về bởi concatTxt () Là giải quyết bên trong chức năng gọi lại của setTimeout ().

Gần cuối đoạn mã trên, trình xử lý sự kiện đầu tiên sau đó() phương thức chạy khi Hứa của getTxt () Là hoàn thành, tức là khi tập tin đã tải thành công. Bên trong xử lý đó, concatTxt () được gọi là và Hứa trở về bởi concatTxt () Được trả lại.

Người xử lý sự kiện thứ hai sau đó() phương thức chạy khi Hứa trở về bởi concatTxt () Là hoàn thành, tức là hết thời gian hai giây và giải quyết() được gọi là với chuỗi nối là tham số của nó.

Cuối cùng, bắt lấy() nắm bắt tất cả các ngoại lệ và thông báo thất bại từ cả hai lời hứa.

Trong phiên bản Hứa hẹn này, “Chào thế giới” chuỗi sẽ là in thành công vào tài liệu.