Sự khác biệt giữa await và từ khóa yield trong Javascript
Javascript là một ngôn ngữ lập trình phổ biến hiện nay, được sử dụng rộng rãi trong việc phát triển web. Trong Javascript, hai từ khóa “await” và “yield” đều được sử dụng để quản lý các tác vụ bất đồng bộ, nhưng chúng có những khác biệt quan trọng. Hãy cùng tìm hiểu chi tiết về sự khác biệt giữa await và từ khóa yield trong Javascript.
Từ khóa await được sử dụng trong các hàm bất đồng bộ (async function) để chờ một Promise hoàn thành trước khi tiếp tục thực thi phần còn lại của hàm.
// Tạo hàm async với từ khóa await
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data'); // Chờ đợi Promise được giải quyết
const data = await response.json(); // Chờ đợi Promise được giải quyết tiếp theo
console.log(data); // Hiển thị dữ liệu
} catch (error) {
console.error('Error fetching data:', error); // Xử lý lỗi nếu có
}
}
fetchData(); // Gọi hàm
– await chỉ có thể được sử dụng trong các hàm async.
– Nó tạm dừng quá trình thực thi của hàm cho đến khi Promise được hoàn thành (resolve hoặc reject).
– Khi Promise hoàn thành, giá trị kết quả sẽ được trả về và tiếp tục thực thi phần còn lại của hàm.
Từ khóa yield được sử dụng trong các hàm sinh (generator function) để tạm dừng và tiếp tục việc thực thi của hàm tại các điểm xác định.
function* generatorExample() {
yield 1; // Tạm dừng hàm và trả về giá trị 1
yield 2; // Tạm dừng hàm và trả về giá trị 2
return 3; // Kết thúc hàm và trả về giá trị 3
}
const generator = generatorExample();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: true }
– yield chỉ có thể được sử dụng trong các hàm sinh (hàm có định dạng function*).
– Nó tạm dừng quá trình thực thi của hàm tại điểm yield và trả về giá trị.
– Để tiếp tục thực thi hàm từ điểm tạm dừng, ta sử dụng phương thức `next()`.
| Tiêu chí | await |
yield |
|---|---|---|
| Sử dụng trong loại hàm | Hàm bất đồng bộ (async function) |
Hàm sinh (function*) |
| Chức năng | Tạm dừng hàm cho đến khi Promise được hoàn tất | Tạm dừng hàm và trả về giá trị tại điểm xác định |
| Quản lý tác vụ bất đồng bộ | Quản lý các tác vụ bất đồng bộ | Không trực tiếp quản lý các tác vụ bất đồng bộ |
| Cách tiếp tục thực thi | Tự động tiếp tục sau khi Promise hoàn thành | Cần gọi phương thức next() để tiếp tục |
// Hàm async với nhiều await
async function multiAwait() {
const step1 = await new Promise(resolve => setTimeout(() => resolve('Step 1 Complete'), 1000));
console.log(step1);
const step2 = await new Promise(resolve => setTimeout(() => resolve('Step 2 Complete'), 1000));
console.log(step2);
const step3 = await new Promise(resolve => setTimeout(() => resolve('Step 3 Complete'), 1000));
console.log(step3);
}
multiAwait();
function* taskManager() {
console.log('Task 1 started');
yield; // Tạm dừng tại đây
console.log('Task 2 started');
yield; // Tạm dừng tại đây
console.log('Task 3 started');
return 'All tasks completed';
}
const manager = taskManager();
manager.next(); // Bắt đầu Task 1
manager.next(); // Bắt đầu Task 2
manager.next(); // Bắt đầu Task 3 và kết thúc
Việc hiểu sự khác biệt giữa await và từ khóa yield trong Javascript là rất quan trọng để quản lý các tác vụ bất đồng bộ một cách hiệu quả. Từ khóa await giúp xử lý các Promise một cách dễ dàng và linh hoạt trong các hàm async, trong khi yield cung cấp cách khá mạnh mẽ để quản lý luồng điều khiển trong các hàm sinh. Hiểu rõ cách sử dụng từng từ khóa sẽ giúp bạn trở nên thành thạo hơn trong lập trình Javascript và tối ưu hóa mã nguồn của bạn.
