Lời hứa là một cách để xử lý các hoạt động không đồng bộ trong JavaScript. Nó đại diện cho giá trị của một hoạt động không đồng bộ. Các lời hứa đã được đưa ra để giải quyết vấn đề thực hiện và xử lý mã không đồng bộ trước các lời hứa chúng tôi đang sử dụng các cuộc gọi lại
Sự cố với phương pháp này nếu chúng tôi có một thao tác không đồng bộ khác bên trong cuộc gọi lại và một thao tác khác. Chúng ta sẽ có một đoạn mã lộn xộn và không thể đọc được. Mã này được gọi là Địa ngục gọi lại
Nếu chúng tôi sử dụng lời hứa trong mã này, nó sẽ dễ đọc hơn, dễ hiểu và dễ bảo trì hơn
Lời hứa có 3 trạng thái khác nhau
Đang chờ xử lý - Trạng thái ban đầu của một lời hứa. Kết quả của lời hứa vẫn chưa được biết vì hoạt động chưa được hoàn thành
Đã thực hiện — Thao tác không đồng bộ đã hoàn tất và thành công với giá trị kết quả
Bị từ chối — Thao tác không đồng bộ không thành công và có lý do tại sao không thành công
Đã giải quyết - Nếu lời hứa đã được thực hiện hoặc bị từ chối
Hàm tạo Promise có hai tham số lần lượt là các hàm resolve và reject.
Nếu thao tác không đồng bộ đã hoàn tất mà không có lỗi, hãy gọi hàm resolve để giải quyết lời hứa hoặc nếu xảy ra lỗi
hãy gọi hàm reject và chuyển lỗi hoặc lý do .
Chúng tôi có thể truy cập kết quả của lời hứa đã thực hiện bằng phương thức .then
và chúng tôi phát hiện lỗi trong phương thức .catch. Chúng tôi xâu chuỗi nhiều hoạt động của lời hứa không đồng bộ trong phương thức .then vì phương thức .then trả về một Lời hứa giống như ví dụ trong hình e ở trên.
Chúng ta có thể tạo một hàm trợ giúp để chuyển đổi một hoạt động không đồng bộ với một cuộc gọi lại thành lời hứa. Nó hoạt động giống như chức năng tiện ích promisify từ mô-đun lõi nút.
Câu hỏi số 2. Văn bản mẫu là gì?
Mẫu chữ là một cách mới để tạo chuỗi trong JavaScript. Chúng tôi có thể tạo Mẫu chữ bằng cách sử dụng ký hiệu backtick hoặc back-quote
Trong phiên bản ES5, chúng ta cần thoát khỏi ' bằng cách sử dụng resolve0 để thoát khỏi chức năng thông thường của ký hiệu đó, trong trường hợp này là hoàn thành giá trị chuỗi đó. Trong Template Literals, chúng ta không cần phải làm điều đó
Trong phiên bản ES5, chúng tôi cần thêm resolve1 này để có một dòng mới trong chuỗi của chúng tôi. Trong Template Literals, chúng ta không cần phải làm điều đó
In the ES5 version, If we need to add an expression or value in a string we need to use the + or string concatenation operator. In Template Literals, we can embed an expression using ${expr} which makes it cleaner than the ES5 version.Câu hỏi số 3. Phá hủy đối tượng là gì?Phá hủy đối tượng là một cách mới và rõ ràng hơn để nhận hoặc trích xuất các giá trị từ một đối tượng hoặc một mảng
Giả sử chúng ta có một đối tượng trông như thế này
Cách cũ để lấy các thuộc tính từ một đối tượng là chúng ta tạo một biến có cùng tên với thuộc tính của đối tượng. Cách này hơi rắc rối vì chúng tôi đang tạo một biến mới cho mọi thuộc tính. Hãy tưởng tượng chúng ta có một đối tượng lớn với rất nhiều thuộc tính và phương thức sử dụng cách này để trích xuất các thuộc tính sẽ rất khó chịu
1
Nếu chúng ta sử dụng phá hủy đối tượng, nó sẽ sạch hơn và mất một ít thời gian hơn so với cách cũ. Cú pháp để phá hủy đối tượng là nếu chúng ta lấy các thuộc tính trong một đối tượng, chúng ta sử dụng resolve2 và bên trong đó, chúng ta chỉ định các thuộc tính mà chúng ta muốn trích xuất và nếu chúng ta lấy dữ liệu từ một mảng, chúng ta sử dụng resolve3
Nếu chúng ta muốn thay đổi tên biến mà chúng ta muốn trích xuất, chúng ta sử dụng cú pháp resolve4. Trong ví dụ này, giá trị của biến resolve5 sẽ giữ giá trị của thuộc tính resolve6 và biến resolve7 sẽ giữ giá trị của thuộc tính resolve8
Chúng ta cũng có thể có các giá trị mặc định khi phá hủy. Trong ví dụ này, nếu thuộc tính resolve6 giữ giá trị reject0 trong đối tượng thì khi chúng ta hủy cấu trúc, biến resolve6 sẽ giữ giá trị mặc định là reject2
Câu hỏi số 4. Async/await là gì và nó hoạt động như thế nào?
async/await là cách mới để viết mã không đồng bộ hoặc mã không chặn trong JavaScript. Nó được xây dựng dựa trên Promises. Nó làm cho việc viết mã không đồng bộ trở nên dễ đọc và gọn gàng hơn
Lời hứa và Gọi lại. Nhưng bạn phải tìm hiểu kiến thức cơ bản về Lời hứa trước khi sử dụng tính năng này vì như tôi đã nói trước đó, nó được xây dựng dựa trên Lời hứa, điều đó có nghĩa là vẫn sử dụng Lời hứa dưới mui xe.
Sử dụng lời hứa
Sử dụng Async/Await
Ghi chú. Chúng tôi đang sử dụng câu lệnh try/catch cũ để bắt bất kỳ lỗi nào xảy ra trong bất kỳ thao tác không đồng bộ nào trong câu lệnh try
Ghi chú. Từ khóa async trước khi khai báo hàm làm cho hàm trả về ngầm định một Promise
Ghi chú. Từ khóa chờ đợi chỉ có thể được sử dụng bên trong chức năng không đồng bộ. Sử dụng từ khóa chờ đợi trong bất kỳ chức năng nào khác không phải là chức năng không đồng bộ sẽ gây ra lỗi. Từ khóa await đợi biểu thức bên tay phải [có lẽ là Lời hứa] quay lại trước khi thực thi dòng mã tiếp theo
Câu hỏi số 5. Tham số mặc định là gì?
Tham số mặc định là một cách mới để xác định các biến mặc định trong JavaScript, nó có sẵn trong Phiên bản ES6 hoặc ECMAScript 2015
Chúng ta cũng có thể sử dụng Destructuring trong Default Parameters
Chúng ta cũng có thể sử dụng các tham số được xác định trước cho các tham số được xác định sau chúng
Câu hỏi số 6. Đối tượng Wrapper là gì?
Các giá trị nguyên thủy như reject3,reject4 và reject5 ngoại trừ reject6 và reject0 có các thuộc tính và phương thức mặc dù chúng không phải là reject8
reject9 là một giá trị resolve0 không có thuộc tính và phương thức nhưng trong ví dụ này, chúng tôi đang gọi một phương thức resolve1 không đưa ra lỗi nhưng trả về SNIGDHO
Lý do cho điều này là giá trị resolve2 tạm thời được chuyển đổi hoặc ép buộc thành một resolve3 để biến reject9 hoạt động giống như một biến resolve3. Mọi resolve2 ngoại trừ reject6 và reject0 đều có Đối tượng Bao bọc. Các đối tượng Wrapper là resolve9,______20,reject1,reject2 và reject3. Trong trường hợp này, lệnh gọi reject4, đằng sau hậu trường nó trông như thế này
Đối tượng mới được tạo ngay lập tức bị loại bỏ sau khi chúng ta truy cập xong một thuộc tính hoặc gọi một phương thức
Câu hỏi số 7. Các cách để xử lý Mã không đồng bộ trong Javascript là gì?- gọi lại
- lời hứa
- không đồng bộ/chờ đợi
- Thư viện như async. js, chim xanh, q, đồng
Có 4 cách mà một hàm có thể được gọi trong JavaScript. Lời gọi xác định giá trị của reject5 hoặc đối tượng "chủ sở hữu" của hàm đó
Gọi như một hàm — Nếu một hàm không được gọi như một phương thức, như một hàm tạo hoặc với các phương thức reject6, reject7 thì nó được gọi như một hàm. Đối tượng "chủ sở hữu" của chức năng này sẽ là đối tượng reject8
Gọi như một phương thức — Nếu một thuộc tính của một đối tượng có một giá trị của một hàm, chúng ta gọi nó là một phương thức. Khi phương thức đó được gọi, giá trị reject5 của phương thức đó sẽ là đối tượng đó
Lời gọi như một hàm tạo — Nếu một hàm được gọi với từ khóa .then0 trước nó thì nó được gọi là .then1. Một đối tượng trống sẽ được tạo và reject5 sẽ trỏ đến đối tượng đó
Gọi bằng các phương thức .then3 và .then4 - Nếu chúng ta muốn chỉ định rõ ràng giá trị reject5 hoặc đối tượng "chủ sở hữu" của hàm, chúng ta có thể sử dụng các phương thức này. Các phương pháp này có sẵn cho tất cả các chức năng
Câu hỏi số 9. Từ khóa
.then6 làm gì?Từ khóa .then0 được sử dụng với hàm tạo để tạo đối tượng
trong JavaScript.
Giả sử chúng ta có một mã ví dụ dưới đây
Từ khóa .then0 thực hiện 4 điều
- Tạo một đối tượng rỗng
- Gán đối tượng trống đó cho giá trị
reject5 - Hàm sẽ kế thừa từ functionName. nguyên mẫu
- Trả về
reject5 nếu không sử dụng câu lệnh.catch1 rõ ràng
Trong hình trên, trước tiên, nó sẽ tạo một đối tượng trống resolve2, sau đó
nó sẽ tạo giá trị reject5 cho đối tượng trống đó là .catch4 và thêm các thuộc tính cho đối tượng reject5 đó. Bởi vì chúng tôi không có câu lệnh rõ ràng .catch1 nên nó sẽ tự động trả về reject5 cho chúng tôi.
Khi một sự kiện xảy ra trên một phần tử DOM, sự kiện đó không hoàn toàn xảy ra trên một phần tử đó. Trong Giai đoạn nắm bắt, sự kiện bắt đầu từ reject8 cho đến phần tử đã kích hoạt sự kiện