Hướng dẫn python return await - trăn trở lại đang chờ đợi

Khi thực hiện code bất đồng bộ trong JavaScript, thông thường bạn sẽ sử dụng callback hoặc Promise. Tuy nhiên, vẫn có 1 cách để bạn có thể làm việc với code bất đồng bộ đơn giản và hiệu quả hơn, đó chính là Async Await. Vậy, Async Await là gì? Những mẫu code ví dụ cho Async Await và lý do tại sao nên dùng Async Awaitsẽ được Tino Group hé lộ trong bài viết nhé! sẽ được Tino Group hé lộ trong bài viết nhé!

Nội dung chính

• Cú pháp của Async
• Cú pháp của Await
• 6 lý do vì sao bạn nên sử dụng Async Await
• Code trực quan, ngắn gọn và đơn giản
• Khả năng tăng tốc xử lý lỗi
• Đơn giản hóa câu điều kiện
• Đơn giản hóa các Promise trả về
• Tạo ghi chú lỗi
• Debug đơn giản và dễ dàng hơn
• Những câu hỏi thường gặp
• Callback Function là gì?
• Promise có trở nên lỗi thời hay không?
• Async Await được hỗ trợ trên phiên bản trình duyệt nào?
• Học thêm về Async Await ở đâu?

JavaScript luôn được cải tiến và trong bản cập nhật ES7 vào năm 2016, JavaScript đã được cập nhật thêm rất nhiều function (chức năng) mới được như: Arrow Functions, Array methods, Loops for/in, Template literals,…

Và trong đó có một function mới để giải quyết bài toán bất đồng bộ một cách nhanh gọn hơn, đó chính là Async Await function.

Async Await được phát triển dựa trên nền tảng của Promise function và tương thích với tất cả Promise nào dựa trên API để xử lý các trường hợp bất đồng bộ.

Trong đó, ta có Async Await với tính năng như sau:

• Async được sử dụng để khai báo một hàm bất đồng bộ và hàm sẽ luôn trả về một giá trị. Nếu Promise không được thực thi, JavaScript sẽ tự động kết thúc quá trình.được sử dụng để khai báo một hàm bất đồng bộ và hàm sẽ luôn trả về một giá trị. Nếu Promise không được thực thi, JavaScript sẽ tự động kết thúc quá trình.
• Await được sử dụng để chờ một Promises trong một khối Async, công dụng dễ hiểu của Await là “kêu” JavaScript phải chờ cho đến khi nào có một Promise trả kết quả. Trong đó, await chỉ có công dụng thực hiện chức năng tạo ra sự không đồng bộ bằng cách chờ 1 khối trả kết quả, await không chờ đợi toàn bộ kết quả trong chương trình được trả về.được sử dụng để chờ một Promises trong một khối Async, công dụng dễ hiểu của Await là “kêu” JavaScript phải chờ cho đến khi nào có một Promise trả kết quả. Trong đó, await chỉ có công dụng thực hiện chức năng tạo ra sự không đồng bộ bằng cách chờ 1 khối trả kết quả, await không chờ đợi toàn bộ kết quả trong chương trình được trả về.

Cú pháp của Async

Đối với Async, bạn chỉ cần đặt từ Async ngay trước 1 hàm làm cho hàm đó trả về Promise là được. Ví dụ:

async function myFunction() {

 return "Hello";

}

Tương tự, bạn đặt vào trước Promise như sau:

async function myFunction() {

 return Promise.resolve("Hello");

}

So sánh với trường hợp bạn chỉ sử dụng Promise, câu lệnh của bạn sẽ trở nên như thế này:Promise, câu lệnh của bạn sẽ trở nên như thế này:

myFunction().then(

 function(value) { /* code if successful */ },

 function(error) { /* code if some error */ }

);

Cú pháp của Await

6 lý do vì sao bạn nên sử dụng Async Await

let value = await Promise;

Code trực quan, ngắn gọn và đơn giản

Khả năng tăng tốc xử lý lỗi

JavaScript Async / Await

Đợi xíu! 3 giây thôi là bạn có thể nhìn thấy điều bất ngờ.

Đơn giản hóa câu điều kiện

Đơn giản hóa các Promise trả về

6 lý do vì sao bạn nên sử dụng Async Await

Code trực quan, ngắn gọn và đơn giản

Khả năng tăng tốc xử lý lỗi

Khả năng tăng tốc xử lý lỗi

Đơn giản hóa câu điều kiện

const makeRequest = () => {

 try {

 getJSON()

 .then(result => {

 // this parse may fail

 const data = JSON.parse(result)

 console.log(data)

 })

 // bỏ ghi chú khối này để xử lý lỗi không đồng bộ bằng cách xóa dòng và xóa luôn các dấu //

 // .catch((err) => {

 // console.log(err)

 // })

 } catch (err) {

 console.log(err)

 }

Đơn giản hóa các Promise trả về

Tạo ghi chú lỗi

const makeRequest = async () => {

 try {

 // phân tích cú pháp này có thể không thành công

 const data = JSON.parse(await getJSON())

 console.log(data)

 } catch (err) {

 console.log(err)

 }

}

Đơn giản hóa câu điều kiện

Đơn giản hóa các Promise trả về

const makeRequest = () => {

 return getJSON()

 .then(data => {

 if (data.needsAnotherRequest) {

 return makeAnotherRequest(data)

 .then(moreData => {

 console.log(moreData)

 return moreData

 })

 } else {

 console.log(data)

 return data

 }

 })

}

Tạo ghi chú lỗi

const makeRequest = async () => {

 const data = await getJSON()

 if (data.needsAnotherRequest) {

 const moreData = await makeAnotherRequest(data);

 console.log(moreData)

 return moreData

 } else {

 console.log(data)

 return data 

 }

}

Đơn giản hóa các Promise trả về

Tạo ghi chú lỗi

const makeRequest = () => {

 return Promise1()

 .then(value1 => {

 // do something

 return Promise2(value1)

 .then(value2 => {

 // do something 

 return Promise3(value1, value2)

 })

 })

}

Debug đơn giản và dễ dàng hơnPromise.all để giải quyết vấn đề đơn giản hơn (ví dụ Promise3 của bạn yêu cầu cả value1 và value2 mới đủ thỏa mãn).

async function myFunction() {

 return Promise.resolve("Hello");

}

Những câu hỏi thường gặp

async function myFunction() {

 return Promise.resolve("Hello");

}

Thay vì 1 “đống” các hàm các điều kiện, giờ đây, bạn chỉ cần code ít hơn và nếu có một người khác giúp bạn sửa code, họ cũng “dễ thở” hơn rất nhiều để hiểu và giúp bạn tốt hơn.

Tạo ghi chú lỗi

Ví dụ, bạn có một đoạn code sẽ gọi nhiều Promise cùng lúc trong chuỗi và ở đâu trong chuỗi đó có một lỗi như trong đoạn code này:

async function myFunction() {

 return Promise.resolve("Hello");

}

Như bạn có thể thấy, nhật ký ghi lỗi của bạn chỉ trả về số dòng và hàm bị lỗi cụ thể. Chỉ duy nhất một dòng bị trả về là:

async function myFunction() {

 return Promise.resolve("Hello");

}

Nếu sử dụng Async Await, nội dung sẽ được trả tới tận hàm nào bị xảy ra lỗi luôn, ví dụ trực quan như sau:

async function myFunction() {

 return Promise.resolve("Hello");

}

Khi bạn được gửi địa chỉ nhà và biết luôn cả chủ nhà, việc sửa lỗi sẽ trở nên dễ dàng hơn vô cùng. Như bạn thấy ở đây, hàm makeRequest đã bị lỗi và đưa chúng ta đến lý do thứ 6: sửa lỗi đơn giản và dễ dàng.makeRequest đã bị lỗi và đưa chúng ta đến lý do thứ 6: sửa lỗi đơn giản và dễ dàng.

Debug đơn giản và dễ dàng hơn

Không nỗi đau nào to hơn việc đi sửa lỗi code! Và sử dụng Async Await sẽ giúp bạn sửa lỗi trở nên dễ dàng hơn rất nhiều! Với Async Await, bạn chỉ cần chạy sửa lỗi từng dòng như thông thường và không cần phải gọi arrow functions nhiều lần làm mọi thứ trở nên phức tạp.

Qua bài viết, bạn có thể thấy được rằng Async Await đã giúp việc code của bạn trở nên trực quan hơn, ngắn gọn hơn và dễ dàng hiểu hơn bao giờ hết. Tino Group hi vọng với những ví dụ này có thể giúp bạn xử lý code của mình đẹp và gọn hơn!

Bài viết có tham khảo nội dung từ: Hackernoon, Developer Mozilla và W3School.

Những câu hỏi thường gặp

CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO

• Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Center, Số 72 Lê Thánh Tôn, Phường Bến Nghé, Quận 1, Thành phố Hồ Chí MinhVăn phòng đại diện: 42 Trần Phú, Phường 4, Quận 5, Thành phố Hồ Chí Minh
  Văn phòng đại diện: 42 Trần Phú, Phường 4, Quận 5, Thành phố Hồ Chí Minh
• Điện thoại: 0364 333 333Tổng đài miễn phí: 1800 6734
  Tổng đài miễn phí: 1800 6734
• Email:
• Website: www.tino.org