Nó có thể không đồng bộ. Nó có thể là chức năng. Nó có thể hướng đối tượng. Nó có thể là phía khách hàng. Nó có thể là phía máy chủ. Danh sách cứ kéo dài
Bài viết này sẽ tập trung vào JavaScript không đồng bộ
Nhưng chờ đã, JavaScript là ngôn ngữ đồng bộ
Điều này có nghĩa là chỉ có thể thực hiện một thao tác tại một thời điểm. Nhưng đó không phải là toàn bộ bức tranh ở đây. Có nhiều cách JavaScript cung cấp cho chúng ta khả năng làm cho nó hoạt động như một ngôn ngữ không đồng bộ. Một trong số đó là với mệnh đề Async-Await
Không đồng bộ đang chờ là gì?
Async và Await là phần mở rộng của lời hứa. Nếu bạn chưa rõ các khái niệm về Promise, bạn có thể tham khảo bài viết trước của tôi Cách viết Promise trong JavaScript
Không đồng bộ
Các chức năng không đồng bộ cho phép chúng tôi viết mã dựa trên lời hứa như thể nó đồng bộ, nhưng không chặn luồng thực thi. Nó hoạt động không đồng bộ thông qua vòng lặp sự kiện. Các chức năng không đồng bộ sẽ luôn trả về một giá trị. Việc sử dụng
async function firstAsync[] {3 chỉ ngụ ý rằng một lời hứa sẽ được trả lại và nếu một
let promise = new Promise[[res, rej] => {
setTimeout[[] => res["Now it's done!"], 1000]
}];
// wait until the promise returns us a value
let result = await promise;
// "Now it's done!"
alert[result];
}
};firstAsync[];
async function firstAsync[] {4 không được trả lại, JavaScript sẽ tự động gói nó trong một
let promise = new Promise[[res, rej] => {
setTimeout[[] => res["Now it's done!"], 1000]
}];
// wait until the promise returns us a value
let result = await promise;
// "Now it's done!"
alert[result];
}
};firstAsync[];
async function firstAsync[] {4 đã giải quyết với giá trị của nó
let promise = new Promise[[res, rej] => {
setTimeout[[] => res["Now it's done!"], 1000]
}];
// wait until the promise returns us a value
let result = await promise;
// "Now it's done!"
alert[result];
}
};firstAsync[];
async function firstAsync[] {
return 27;
}
firstAsync[].then[alert]; // 27Chạy đoạn mã trên cho đầu ra cảnh báo là 27, điều đó có nghĩa là một
async function firstAsync[] {4 đã được trả về, nếu không thì phương thức
let promise = new Promise[[res, rej] => {
setTimeout[[] => res["Now it's done!"], 1000]
}];
// wait until the promise returns us a value
let result = await promise;
// "Now it's done!"
alert[result];
}
};firstAsync[];
async function firstAsync[] {0 đơn giản là không thể thực hiện đượcChờ đợi
let promise = new Promise[[res, rej] => {
setTimeout[[] => res["Now it's done!"], 1000]
}];
// wait until the promise returns us a value
let result = await promise;
// "Now it's done!"
alert[result];
}
};firstAsync[];
Các toán tử chờ đợi được sử dụng để chờ một Lời hứa. Nó chỉ có thể được sử dụng bên trong một khối Async. Từ khóa Await làm cho JavaScript đợi cho đến khi lời hứa trả về kết quả. Cần lưu ý rằng nó chỉ làm cho khối chức năng
async function firstAsync[] {3 chờ đợi chứ không phải toàn bộ chương trình được thực thi
let promise = new Promise[[res, rej] => {
setTimeout[[] => res["Now it's done!"], 1000]
}];
// wait until the promise returns us a value
let result = await promise;
// "Now it's done!"
alert[result];
}
};firstAsync[];
Khối mã dưới đây cho thấy việc sử dụng Async Await cùng nhau
async function firstAsync[] {Những điều cần nhớ khi sử dụng Async Await
let promise = new Promise[[res, rej] => {
setTimeout[[] => res["Now it's done!"], 1000]
}];
// wait until the promise returns us a value
let result = await promise;
// "Now it's done!"
alert[result];
}
};firstAsync[];
Chúng tôi không thể sử dụng từ khóa async function firstAsync[] {
let promise = new Promise[[res, rej] => {
setTimeout[[] => res["Now it's done!"], 1000]
}];
// wait until the promise returns us a value
let result = await promise;
// "Now it's done!"
alert[result];
}
};firstAsync[];
2 bên trong các chức năng thông thường
let promise = new Promise[[res, rej] => {
setTimeout[[] => res["Now it's done!"], 1000]
}];
// wait until the promise returns us a value
let result = await promise;
// "Now it's done!"
alert[result];
}
};firstAsync[];
function firstAsync[] {
let promise = Promise.resolve[10];
let result = await promise; // Syntax error
}
Để hàm trên hoạt động bình thường, chúng ta cần thêm
async function firstAsync[] {3 trước hàm
let promise = new Promise[[res, rej] => {
setTimeout[[] => res["Now it's done!"], 1000]
}];
// wait until the promise returns us a value
let result = await promise;
// "Now it's done!"
alert[result];
}
};firstAsync[];
async function firstAsync[] {4
let promise = new Promise[[res, rej] => {
setTimeout[[] => res["Now it's done!"], 1000]
}];
// wait until the promise returns us a value
let result = await promise;
// "Now it's done!"
alert[result];
}
};firstAsync[];
Async Await thực hiện tuần tự
Không hẳn là một điều xấu, nhưng việc thực thi song song sẽ nhanh hơn nhiều
Ví dụ
async function sequence[] {
await promise1[50]; // Wait 50ms…
await promise2[50]; // …then wait another 50ms.
return "done!";
}Ở trên mất 100 mili giây để hoàn thành, không phải là một lượng thời gian lớn nhưng vẫn chậm
Điều này là do nó đang xảy ra theo trình tự. Hai lời hứa được trả lại, cả hai đều mất 50 mili giây để hoàn thành. Lời hứa thứ hai chỉ thực hiện sau khi lời hứa đầu tiên được giải quyết. Đây không phải là một phương pháp hay vì các yêu cầu lớn có thể rất tốn thời gian. Chúng ta phải thực hiện song song
Điều đó có thể đạt được bằng cách sử dụng
async function firstAsync[] {5
let promise = new Promise[[res, rej] => {
setTimeout[[] => res["Now it's done!"], 1000]
}];
// wait until the promise returns us a value
let result = await promise;
// "Now it's done!"
alert[result];
}
};firstAsync[];
Theo MDN
Phương thức
async function firstAsync[] {6 trả về một
let promise = new Promise[[res, rej] => {
setTimeout[[] => res["Now it's done!"], 1000]
}];
// wait until the promise returns us a value
let result = await promise;
// "Now it's done!"
alert[result];
}
};firstAsync[];async function firstAsync[] {7 duy nhất giải quyết khi tất cả các lời hứa được chuyển thành một lần lặp đã được giải quyết hoặc khi lần lặp đó không chứa lời hứa nào. Nó từ chối với lý do của lời hứa đầu tiên từ chối
let promise = new Promise[[res, rej] => {
setTimeout[[] => res["Now it's done!"], 1000]
}];
// wait until the promise returns us a value
let result = await promise;
// "Now it's done!"
alert[result];
}
};firstAsync[];
Hứa. tất cả các[]
async function firstAsync[] {0
let promise = new Promise[[res, rej] => {
setTimeout[[] => res["Now it's done!"], 1000]
}];
// wait until the promise returns us a value
let result = await promise;
// "Now it's done!"
alert[result];
}
};firstAsync[];
Hàm
async function firstAsync[] {8 giải quyết khi tất cả các lời hứa bên trong iterable đã được giải quyết và sau đó trả về kết quả
let promise = new Promise[[res, rej] => {
setTimeout[[] => res["Now it's done!"], 1000]
}];
// wait until the promise returns us a value
let result = await promise;
// "Now it's done!"
alert[result];
}
};firstAsync[];
Một phương pháp khác
async function firstAsync[] {2
let promise = new Promise[[res, rej] => {
setTimeout[[] => res["Now it's done!"], 1000]
}];
// wait until the promise returns us a value
let result = await promise;
// "Now it's done!"
alert[result];
}
};firstAsync[];
Async Await rất mạnh mẽ nhưng chúng đi kèm với những cảnh báo. Nhưng nếu chúng ta sử dụng chúng đúng cách, chúng sẽ giúp làm cho mã của chúng ta rất dễ đọc và hiệu quả
Tôi hy vọng bạn đã học được một cái gì đó mới. Nếu thấy bài viết hữu ích thì nhớ chia sẻ, theo dõi và ủng hộ nhé
Thêm nội dung tại PlainEnglish. io. Đăng ký nhận bản tin hàng tuần miễn phí của chúng tôi. Theo dõi chúng tôi trên Twitter, LinkedIn và Discord