Trong lập trình, xử lí bất đồng bộ là một khái niệm rất quan trọng. JavaScript – một ngôn ngữ lập trình được xây dựng với những tính năng xử lí bất đồng bộ rất tuyệt vời.
JavaScipt cho phép thực hiện đồng thời nhiều câu lệnh cùng một lúc mà không cần chờ đợi câu lệnh trước đó hoàn thành, điều này giúp cho các chương trình chúng ta viết ra có hiệu suất tốt hơn. Trong bài viết này, hãy cùng tìm hiểu một số kĩ thuật xử lí bất đồng bộ thường dùng trong ngôn ngữ lập trình JavaScript nhé.
- Callback
Callback trong JavaScript là một khái niệm quan trọng, được sử dụng để xử lý các hàm bất đồng bộ. Nó cho phép chúng ta truyền một hàm vào một hàm khác để thực hiện khi một hoạt động nào đó hoàn thành. Điều này giúp chương trình trở nên linh hoạt và hiệu quả, đặc biệt trong các tình huống như xử lý yêu cầu mạng, đọc file, hoặc thực hiện các tác vụ đa luồng.
// Viết hàm cộng, trừ
const cong=(a,b)=>a+b
const tru=(a,b)=>a-b
// Viết hàm phép tính truyền vào tham số là hàm callback
const pheptinh=(a,b,callback)=>{
return callback(a,b)
}
// Gọi hàm phép tính và truyền tham số là tên hàm cộng trừ đã khai báo ở trên
console.log(pheptinh(3,4,cong));
console.log(pheptinh(3,4,tru));
- Callback Hell
Tuy nhiên, khi có quá nhiều hàm Callback được gọi lồng vào nhau, khiến cho mã chương trình chúng ta viết trở nên một cấu trúc rối rắm phức tạp, khó đọc, khó hiểu và khó sửa chữa. Đây là một tình huống thường gặp khi chúng ta xử lí bất đồng bộ bằng Callback, trường hợp này gọi là “Callback Hell”.
loginUser(‘username’, ‘password’, function(user) {
getProfile(user, function(profile) {
getFriends(profile, function(friends) {
getMessages(friends, function(messages) {
getNotifications(user, function(notifications) {
updateUI(user, profile, friends, messages, notifications, function(ui) {
// Viết code xử lí ở đây
});
});
});
});
});
});
- Promises
Để giải tránh tình huống Callback Hell, phiên bản ES6 đã giới thiệu khái niệm Promises. Promise là một đối tượng trong JavaScript biểu thị sự hoàn thành hoặc thất bại của một hoạt động bất đồng bộ. Nó trả về một giá trị mà bạn muốn sau khi hoạt động bất đồng bộ hoàn thành (resolve) hoặc không hoàn thành (reject).
// Viết hàm nhập điểm trả về là một đối tượng Promise
// Nếu nhập điểm trong khoảng 0 đến 10 thì thành công (resolve)
// Nếu điểm không nằm trong khoảng 0 đến 10 thì sẽ không hợp lệ (reject)
const nhapdiem=(diem,timer=0)=>{
return new Promise((resolve, reject)=>{
if(diem<0 || diem>10) reject(‘Điểm không hợp lệ’)
else
setTimeout(()=>{
resolve(diem)
},timer)
})
}
// Truyền tham số điểm là 9 là hợp lệ (resolve) sẽ in ra giá trị điểm
nhapdiem(9)
.then((data)=>console.log(data))
.catch((error)=>console.log(error))
// Truyền tham số điểm là 11 không hợp lệ (reject) sẽ in ra thông báo lỗi
nhapdiem(11)
.then((data)=>console.log(data))
.catch((error)=>console.log(error))
- Async/Await
Async/Await là một cách tiếp cận hiện đại và tiện lợi hơn để làm việc xử lí bất đồng bộ. Nó cho phép chúng ta viết mã bất đồng bộ một cách tuần tự, giúp mã dễ đọc và dễ hiểu hơn.
// Viết hàm lấy danh sách các sản phẩm đọc từ API sử dụng async/await
const getProducts=async()=>{
const res=await fetch(‘https://fakestoreapi.com/products’)
const data=await res.json()
console.log(data)
}
// Gọi hàm
getProducts()
Xử lý bất đồng bộ là một phần quan trọng của JavaScript. Hiểu rõ về Callbacks, Promises và Async/Await sẽ giúp bạn viết mã JavaScript mạnh mẽ và hiệu quả hơn. Bằng cách sử dụng các kỹ thuật này một cách linh hoạt và nhuần nhuyễn, bạn có thể tạo ra các ứng dụng có hiệu suất cao hơn, cung cấp trải nghiệm tốt hơn cho người dùng.
Giảng viên Nguyễn Quang Hùng
Bộ môn CNTT
FPT Polytechnic TP HCM
