Async Await là gì? 6 lý do khiến Async Await trở nên vượt trộ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 Await sẽ được Tino Group hé lộ trong bài viết nhé!

Async Await là gì?

JavaScript luôn được nâng cấp cải tiến và trong bản update ES7 vào năm năm nay, JavaScript đã được update thêm rất nhiều function ( công dụng ) mới được như : Arrow Functions, Array methods, Loops for / in, Template literals, …
Và trong đó có một function mới để xử lý 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ộ.

async-await-la-giTrong đó, 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.
  • 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ú 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:

myFunction().then(

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

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

);

Cú pháp của Await

Cách sử dụng cũng khá tựa như Async, bạn chỉ cần đặt từ Await trước 1 hàm sẽ làm cho hàm đó chờ Promise. Tuy nhiên, bạn chỉ hoàn toàn có thể sử dụng Await bên trong khối giải quyết và xử lý của Async thôi nhé !

let value = await Promise;

Ví dụ cơ bản khi sử dụng Await :
Async Await là gì? 6 lý do khiến Async Await trở nên vượt trội 3
ADVERTISEMENT









JavaScript Async / Await

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

Kết quả đầu ra bạn sẽ có như sau :
async-await-la-giBạn hoàn toàn có thể biến hóa nội dung code và chạy thử tại đây .

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

Tất nhiên, đây là một trong những ưu điểm tuyệt vời nhất của Async Await. Khi viết code, bạn sẽ không bị những dòng code phức tạp làm chắn ngang dòng tâm lý của bạn. Ví dụ : bạn chỉ cần try / catch để bắt lỗi và không cần phải then sau đó catch, => code của bạn sẽ trở nên dài dòng, vô cùng phức tạp .
async-await-la-gi

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

Nếu bạn cảm xúc try / catch vẫn chưa đủ để giải quyết và xử lý những lỗi, ví dụ như đoạn code try / catch sau đây :

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)

 }

Với phương pháp code Promise thế này, try / catch sẽ không hề tìm và bắt được những lỗi nếu JSON.parse xảy ra lỗi bên trong Promise. Nếu muốn giải quyết và xử lý, bạn sẽ phải gọi. catch bên trong và lặp lại code lần nữa để giải quyết và xử lý lỗi ! Điều này phức tạp thực sự đấy chứ !
Giờ đây, tất cả chúng ta sẽ giải quyết và xử lý bằng Async Await. Bạn hoàn toàn có thể thấy rằng catch trọn vẹn hoàn toàn có thể bắt lỗi cú pháp .

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

Ví dụ bạn muốn nạp tài liệu và sau đó giải quyết và xử lý rồi quyết định hành động bạn sẽ trả tài liệu lại hoặc lấy thêm cụ thể dựa trên những giá trị được đưa vào. Thông thường, ta sẽ code bằng cách lồng nhiều điều kiện kèm theo như sau :

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

 }

 })

}

Như bạn hoàn toàn có thể thấy, đoạn code có tận 6 điều kiện kèm theo lồng nhau ! Bạn chỉ cần đọc qua, bạn sẽ cảm xúc choáng với đoạn code này, đôi lúc bạn sẽ bị nhầm lẫn và “ bơi ” trong mớ hỗn độn. Thay vì đồng ý mớ “ hỗn độn ” tích hợp if / else đó, bạn hoàn toàn có thể sử dụng Async Await để giải quyết và xử lý đơn thuần – dễ hiểu hơn như sau :

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ề

Ví dụ trong trường hợp bạn gọi 1 Promise1 sau đó quay trở lại và gọi Promise2. Kết quả của chúng thỏa điều kiện kèm theo và sẽ gọi đến Promise3. Đoạn code của bạn sẽ như sau :

const makeRequest = () => {

 return Promise1()

 .then(value1 => {

 // do something

 return Promise2(value1)

 .then(value2 => {

 // do something 

 return Promise3(value1, value2)

 })

 })

}

Trong trường hợp Promise3 của bạn không yêu cầu giá trị trả về của value1, code sẽ đơn giản hơn được một chút. Nếu một trường hợp khác với nhiều điều kiện trả về hơn, mức độ lồng sâu hơn bạn sẽ trở nên rắc rối đấy! Thay vì lồng như vậy, bạn có thể sử dụng Promise.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).

const makeRequest = () => {

 return Promise1()

 .then(value1 => {

 // do something

 return Promise.all([value1, Promise2(value1)])

 })

 .then(([value1, value2]) => {

 // do something 

 return Promise3(value1, value2)

 })

}

Đơn giản hơn nữa, bạn hoàn toàn có thể sử dụng Async Await để giải quyết và xử lý như sau :

const makeRequest = async () => {

 const value1 = await Promise1()

 const value2 = await Promise2(value1)

 return Promise3(value1, value2)

}

Thay vì 1 “ đống ” những hàm những điều kiện kèm theo, 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:

const makeRequest = () => {

 return callAPromise()

 .then(() => callAPromise())

 .then(() => callAPromise())

 .then(() => callAPromise())

 .then(() => callAPromise())

 .then(() => {

 throw new Error("oops");

 })

}

makeRequest()

 .catch(err => {

 console.log(err);

 // output

 // Error: oops at callAPromise.then.then.then.then.then (index.js:9:99)

Như bạn hoàn toà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 đơn cử. Chỉ duy nhất một dòng bị trả về là :

// Error: oops at callAPromise.then.then.then.then.then (index.js:9:99)

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 :

const makeRequest = async () => {

 await callAPromise()

 await callAPromise()

 await callAPromise()

 await callAPromise()

 await callAPromise()

 throw new Error("oops");

}

makeRequest()

 .catch(err => {

 console.log(err);

 // output

 // Error: oops at makeRequest (index.js:7:9)

 })

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.

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 thuận tiện 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ì 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 .
async-await-la-giQua bài viết, bạn hoàn toà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à thuận tiện hiểu hơn khi nào hết. Tino Group hy vọng với những ví dụ này hoàn toàn có thể giúp bạn giải quyết và xử lý code của mình đẹp và gọn hơn !
Bài viết có tìm hiểu thêm nội dung từ : Hackernoon, Developer Mozilla và W3School .

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

Callback Function là gì?

Mô tả đơn thuần, Callback là hoạt động giải trí truyền đoạn code A vào một đoạn code B và tại một thời gian, sự kiện nào đó, đoạn code A hoàn toàn có thể triển khai gọi đoạn code B nhằm mục đích giải quyết và xử lý một sự kiện bất đồng bộ .

Promise có trở nên lỗi thời hay không?

Không, vẫn có rất nhiều trường hợp Async Await không hề xử lý được và bạn vẫn sẽ phải sử dụng Promise để giải quyết và xử lý .
Ngoài ra, bạn cũng nên học thêm về Promise để có kiến thức và kỹ năng nền tảng tốt hơn và sử dụng Async Await được “ ngon lành ” hơn .

Async Await được hỗ trợ trên phiên bản trình duyệt nào?

Trừ duy nhất trình duyệt Internet Explorer phiên bản 7.0 trở xuống sẽ không được tương hỗ, còn hầu hết những phiên bản trình duyệt khác đều được tương hỗ .

Học thêm về Async Await ở đâu?

Bạn hoàn toàn có thể học tại trang W3School trọn vẹn không tính tiền ở đây. Không chỉ học về Async Await, bạn còn được học về JS, SQL, Python, PHP, Java, … cùng nhiều ngôn từ khác một cách trọn vẹn không lấy phí !

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í 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 333
    Tổng đài miễn phí: 1800 6734
  • Email: [email protected]
  • Website: www.tino.org