Async Await Trong Javascript | Hỗ Trợ Trình Duyệt

Giải Thích về Async/Await Javascript trong 10 phút

Bài đăng này đã không được cập nhật trong 3 năm

• Trong một thời gian rất dài, chúng ta phải dựa vào callbacks để làm việc với các đoạn code bất đồng bộ trong javascript. Kết quả là, rất nhiều người trong chúng ta đã có những trải nghiệm kinh khủng khi phải đối mặt với các hàm trông như thế này.

• Callback có rất nhiều nhược điểm. Khi ta có nhiều thao tác bất đồng bộ, các callback phải chờ nhau thực hiện, thời gian để hoàn thành sẽ bị kéo dài hơn. Ngoài ra, việc viết các callback lồng nhau cũng làm cho mã nguồn của ta rắc rối và khó bảo trì.

• Thật may mắn, trong phiên bản ES6 , JavaScript đã được bổ xung thêm ( .then() ) Promise. Nó là một thay thế tuyệt vời cho callbacks và hầu hết cộng đồng nhanh chóng chuyển sang sử dụng nó để thay thế cho callbacks. Code mới của chúng ta gần giống với code cũ, kết quả là trông dễ theo dõi và bảo trì hơn. Tuy nhiên các vấn đề của callback vẫn chưa được giải quyết triệt để.

• Cuối cùng, trong phiên bản ES7 gần đây nhất, Async / Await đã được bổ xung để việc viết code bất đồng bộ trong JavaScript tốt hơn, code dễ nhìn hơn và dễ sử dụng hơn.

Async / Await là gì?

• Async / Await là một tính năng của JavaScript giúp chúng ta làm việc với các hàm bất đồng bộ theo cách thú vị hơn và dễ hiểu hơn. Nó được xây dựng trên Promises và tương thích với tất cả các Promise dựa trên API. Trong đó:

• Async - khai báo một hàm bất đồng bộ (async function someName(){...}).

  • Tự động biến đổi một hàm thông thường thành một Promise.
  • Khi gọi tới hàm async nó sẽ xử lý mọi thứ và được trả về kết quả trong hàm của nó.
  • Async cho phép sử dụng Await.

• Await - tạm dừng việc thực hiện các hàm async. (Var result = await someAsyncCall ()

  .

  • Khi được đặt trước một Promise, nó sẽ đợi cho đến khi Promise kết thúc và trả về kết quả.
  • Await chỉ làm việc với Promises, nó không hoạt động với callbacks.
  • Await chỉ có thể được sử dụng bên trong các function async.

Dưới đây là một ví dụ đơn giản mà hy vọng sẽ rõ ràng những điều trên:

• Giả sử chúng ta muốn lấy một số tệp JSON từ máy chủ của mình. Chúng ta sẽ viết một hàm sử dụng thư viện axios và gửi yêu cầu HTTP GET đến Https://tutorialzine.com/misc/files/example.json . Chúng ta phải chờ đợi phản hồi từ máy chủ, đây là một yêu cầu HTTP không đồng bộ.

• Dưới đây chúng ta sẽ viết cùng một chức năng với 2 cách khác nhau: cách thứ 1 với Promises, và cách thứ 2 với Async / Await


// cách 1: function getJSON() { // To make the function blocking we manually create a Promise. return new Promise( function(resolve) { axios.get('https://tutorialzine.com/misc/files/example.json') .then( function(json) { // The data from the request is available in a .then block // We return the result using resolve. resolve(json); }); }); } // cách 2: // Async/Await approach // The async keyword will automatically create a new Promise and return it. async function getJSONAsync() { // The await keyword saves us from having to write a .then() block. let json = await axios.get('https://tutorialzine.com/misc/files/example.json'); // The result of the GET request is available in the json variable. // We return it just like in a regular synchronous function. return json; }


• Cả hai hàm bên trên đều thực hiện một chức năng hoàn toàn giống nhau - cả hai đều trả về Promises và giải quyết với phản hồi JSON từ axios. Tuy nhiên, phiên bản Async / Await ngắn hơn và dễ đọc hơn.
• Chúng ta có thể gọi hàm async của chúng ta như sau:


getJSONAsync().then( function(result) { // Do something with result. });


Vậy khi có Async / Await có làm cho promises lỗi thời?

• Không hoàn toàn. Khi làm việc với Async / Await, thật ra chúng ta vẫn đang sử dụng ngầm Promises. Vì thế, kể cả khi đang sử dụng Async / Await cần một sự hiểu biết tốt về Promises sẽ rất tốt cho chúng ta.

• Ngoài ra, có những trường hợp mà Async / Await không sử dụng được và chúng ta phải sử dụng Promises. Ví dụ như khi chúng ta cần gọi nhiều thao tác bất đồng bộ và chờ cho tất cả chúng kết thúc. Nếu chúng ta thử và làm điều này với async và await, Điều gì sẽ xảy ra: Hãy xem ví dụ dưới đây các bạn sẽ thấy


async function getABC () { let A = await getValueA(); // getValueA takes 2 second to finish let B = await getValueB(); // getValueB takes 4 second to finish let C = await getValueC(); // getValueC takes 3 second to finish return A*B*C; }


• Mỗi lần gọi tới hàm await sẽ đợi cho đến khi hàm await trước đó kết thúc. Vì các wait sẽ đợi và thực hiện tuần tự từng cái một, toàn bộ chức năng sẽ mất 9 giây để thực hiện xong hàm từ đầu đến cuối (2 + 4 + 3).
• Đây không phải là một giải pháp tối ưu vì A, B và C không phụ thuộc vào nhau, chúng ta không cần biết giá trị của A trước khi chúng ta có được B. Vì vậy, chúng ta có thể lấy chúng cùng một lúc và thời gian chờ đợi sẽ được giảm bớt đi.
• Trong trường hợp như thế này, sử dụng Promise sẽ thích hợp hơn. Để gửi tất cả các yêu cầu cùng lúc, chúng ta sử dụng Promise.all(). Việc sử dụng Promise.all() sẽ đảm bảo chúng ta có tất cả các kết quả trước khi tiếp tục thực thi code, nhưng việc gọi đến các hàm bất đồng bộ sẽ được chạy song song mà không phải tuần tự từng cái một.


async function getABC () { // Promise.all() allows us to send all requests at the same time. let results = await Promise.all([ getValueA, getValueB, getValueC ]); return results.reduce((total,value) => total * value); }


• Bằng cách này, thời gian thực thi hàm sẽ mất it hơn. hàm getValueA và getValueC sẽ thực hiện xong trước khi getValueB xong. Thay vì phải mất 9 giây để chờ từng hàm trả về giá trị như trên, chúng ta sẽ chỉ mất 4 giây để chờ cả 3 hàm trả về giá trị.

Xử lý lỗi trong Async / Await

• Một điều tuyệt vời khác về Async / Await là nó cho phép chúng ta bắt các lỗi không mong đợi bằng cách sử dụng try / catch. Chúng ta chỉ cần để các await call của chúng ta vào trong khối try/catch như sau:


async function doSomethingAsync(){ try { // This async call may fail. let result = await someAsyncCall(); } catch(error) { // If it does we will catch the error here. } }


• Mệnh đề catch sẽ xử lý các lỗi gây ra bởi các hàm bất đồng bộ hoặc bất kỳ lỗi nào chúng ta có thể đã viết bên trong khối try.

• Trong một vài tình huống, chúng ta cũng có thể bắt các lỗi khi đang thực hiện function async. Vì tất cả các hàm async đều trả về Promises, chúng ta chỉ cần gọi thêm hàm .catch() khi gọi chúng.


// Async function without a try/catch block. async function doSomethingAsync(){ // This async call may fail. let result = await someAsyncCall(); return result; } // We catch the error upon calling the function. doSomethingAsync(). .then(successHandler) .catch(errorHandler);


• Dựa vào các tình huống cụ thể, chúng ta sẽ sử dụng try/catch hoặc .catch() để bắt và xử lý lỗi. Tuy nhiên, chúng ta không nên sử dụng cả 2 cùng một lúc vì nó có thể dẫn đến các vấn đề không mong muốn.

Hỗ trợ trình duyệt

• Async / Await có thể sử dụng trong hầu hết các trình duyệt chính, ngoại trừ IE11 - tất cả các trình duyệt sẽ nhận ra mã async / await của bạn mà không cần các thư viện bên ngoài.
• Nếu các bạn dùng Node cũng có sử dụng async từ Node 8 trở lên. Nó sẽ trở thành LTS vào cuối năm nay.
• Nếu cái này không đáp ứng được nhu cầu của bạn, cũng có một số trình chuyển đổi JS như Babel và TypeScript và thư viện Node.js async/await cung cấp các phiên bản nền tảng riêng của tính năng này.

Phần kết luận

• Với việc bổ sung Async / Await trong ngôn ngữ JavaScript có một bước nhảy vọt về khả năng dễ đọc và dễ sử dụng cho người mới bắt đầu với các lập trình JavaScript và người đã có kinh nghiệm.

• Một số chia sẻ có mình chỉ mang tính chất cá nhân, có thể chưa chính xác, các bạn cứ cmt , chia sẻ những gì em, mình chưa đúng ạ

• Link tham khảo:

All rights reserved

Async/Await hoạt động như thế nào trong JS

Bài đăng này đã không được cập nhật trong 2 năm

Mở đầu

Bản chất JavaScript là một ngôn ngữ đơn luồng, và nó chỉ chạy trên một luồng (thread) duy nhất. Thread này được dựa trên một khái niệm gọi là event loop. Thread này sẽ phản hồi tới các event khi chúng xảy ra. Là một ngôn ngữ đơn luồng, JavaScript chỉ có thể xử lý từng câu lệnh một. Trong khi đang xử lý câu lệnh đó thì thread sẽ bị block.

Việc đơn luồng này có nhiều ưu điểm, đơn giản nhất là nó sẽ giúp code dễ hơn. Bạn sẽ không cần phải quan tâm đến các vấn đề liên quan đến concurrency. Code của bạn sẽ được thực thi tuần tự từ trên xuống dướii theo cách bạn code. Bạn cũng sẽ không phải lo đến việc có nhiều việc khác nhau chạy trên cùng một thời điểm.

Tuy nhiên nó vẫn có nhược điểm lớn là chỉ có một công việc được làm tại một thời điểm. Mọi việc khác phải chờ đến khi nó hoàn thiện mới có thể được thực thi. Việc này thật sự sẽ là một vấn đề nếu bạn phải lấy data từ một API.

Khi gọi đến API bằng cách đồng bộ/synchronous, việc này có thể block main thread cho đến khi xử lý xong. Do đó code của bạn sẽ phải chờ cho đến khi main thread được mở, đồng nghĩa với việc app của bạn sẽ bị đứng và không có phản hồi.

Để giải quyết cho vấn đề ở đây là viết code bất đồng bộ, đưa việc gọi API vào xử lý bất đồng bộ. Khi làm vậy thì JavaScript có thể chạy được nhiều task khác nhau và chạy cùng lúc với nhau. Khi chạy một task bất đồng bộ thì nó sẽ được đưa vào event queue do đó sẽ không block main thread.

Với bất đồng bộ, việc các sự kiện, công việc hoạt động song song không gây ảnh hưởng tới luồng công việc chính. Điều này sẽ tối ưu được thời gian chờ, qua đó làm giảm tổng thời gian cần để hoàn thành một nhiệm vụ. Nhưng kết quả của công việc thực hiện sau có thể được trả về trước kết quả của công việc chạy trước nó, do vậy kết quả trả về cuối cùng có thể sẽ không theo thứ tự đã định sẵn, yêu cầu chúng ta cần kiểm soát chặt chẽ hơn.

Chúng ta có 3 cách để xử lý việc này : callback, promise, asyn await.

Callback có rất nhiều nhược điểm. Khi ta có nhiều thao tác bất đồng bộ, các callback phải chờ nhau thực hiện, thời gian để hoàn thành sẽ bị kéo dài hơn. Ngoài ra, việc viết các callback lồng nhau cũng làm cho mã nguồn của ta rắc rối và khó bảo trì.

Trong phiên bản ES6 , JavaScript đã được bổ xung thêm ( .then() ) Promise. Nó là một thay thế tuyệt vời cho callbacks và hầu hết cộng đồng nhanh chóng chuyển sang sử dụng nó để thay thế cho callbacks. Code mới của chúng ta gần giống với code cũ, kết quả là trông dễ theo dõi và bảo trì hơn. Tuy nhiên, dùng promise đôi khi ta vẫn thấy hơi khó chịu vì phải truyền callback vào hàm then và catch. Code cũng sẽ hơi dư thừa và khó debug, vì toàn bộ các hàm then chỉ được tính là 1 câu lệnh nên không debug riêng từng dòng được.

Cuối cùng, trong phiên bản ES7 gần đây nhất, Async / Await đã được bổ xung để việc viết code bất đồng bộ trong JavaScript tốt hơn, code dễ nhìn hơn và dễ sử dụng hơn.

Async/Await

Async/await được cấu tạo từ 2 phần. Phần đầu tiên là function async. Hàm này sẽ được tự động thực thi bất đồng bộ. Giá trị nó trả về là một Promise. Vì trả về Promise nên bạn sẽ phải sử dụng các handler của Promise để xử lý giá trị này.

Phần thứ hai của async/await là operator await. Operator này sẽ được dùng cùng với một Promise. Nó sẽ khiến cho function async tạm dừng cho đến khi Promise đó chạy xong. Ngay sau đó nó sẽ lấy gía trị của Promise mà cho function async tiếp tục chạy.

1. Async functions

Phần quan trọng nhất của Async functions là async key. Điều này sẽ cho JavaScript biết rằng bạn muốn khai báo một hàm Async thay vì hàm thông thường. Đó cũng là async key này sẽ cho phép bạn sử dụng await key bên trong hàm không đồng bộ đó. Nếu không, JavaScript sẽ ném ra SyntaxError. Thêm về điều này sau.

Hàm này hàm trả về promise.

Ví dụ :


async function helloWorld() { return "Hello World" } helloWorld().then( res => console.log(res) //in ra Hello World )


2. Await

Từ khóa Await được đặt trước 1 hàm làm cho hàm chờ một promise. Chỉ có thể sử dụng await bên trong một hàm Async.

Await - tạm dừng việc thực hiện các hàm async.

• Khi được đặt trước một Promise, nó sẽ đợi cho đến khi Promise kết thúc và trả về kết quả.
• Await chỉ làm việc với Promises, nó không hoạt động với callbacks.
• Await chỉ có thể được sử dụng bên trong các function async.


async function getJSONAsync() { // The await keyword saves us from having to write a .then() block. let json = await axios.get('https://tutorialzine.com/misc/files/example.json'); // The result of the GET request is available in the json variable. // We return it just like in a regular synchronous function. return json; }function findRandomImgPromise(tag) { const apiKey = 'a89c66e48519481ab448a3f8356e635c'; const endpoint = `https://api.giphy.com/v1/gifs/random?api_key=${apiKey}&tag=${tag}`; return fetch(endpoint) .then(rs => rs.json()) .then(data => data.data.fixed_width_small_url); } $('#request').click(async () => { const imgUrl = await findRandomImgPromise('cat'); $('#cat').attr('src', imgUrl); });


Như trong hình phía trên, hàm findRandomImgPromise là hàm bất đồng bộ, trả về một Promise. Với từ khoá await, ta có thể coi hàm này là đồng bộ, câu lệnh phía sau chỉ được chạy sau khi hàm này trả về kết quả.

Xử lý lỗi trong Async / Await

Một điều tuyệt vời khác về Async / Await là nó cho phép chúng ta bắt các lỗi không mong đợi bằng cách sử dụng try / catch. Chúng ta chỉ cần để các await call của chúng ta vào trong khối try/catch như sau:

Khi nói đến async / await và lỗi, có hai cách để xử lý chúng. Một cách là sử dụng catch()chức năng. Hàm async trả về một .Promise Khi lời hứa bị từ chối, nó là catch()chức năng cho phép bạn bắt và xử lý lỗi này. Điều này cũng hoạt động cho Async / await.


// Create async function async function myAsyncFunc() { // Create promise that rejects // and wait for its completion await new Promise((resolve, reject) => { reject('Promise rejected!') }) } // Invoke myAsyncFunc and catch the error myAsyncFunc() .catch(err => { console.log(`error: ${err}`) }) // 'error: Promise rejected!'


Một điều tuyệt vời khác về Async / Await là nó cho phép chúng ta bắt các lỗi không mong đợi bằng cách sử dụng try / catch. Chúng ta chỉ cần để các await call của chúng ta vào trong khối try/catch như sau:


/ Create async function async function myAsyncFunc() { // Create new promise that rejects const myPromise = new Promise((resolve, reject) => { reject('Promise rejected!') }) // Create try...catch statement try { // Await the promise to get rejected const message = await myPromise } catch(err) { // Catch any error and log it console.log(`error: ${err}`) } } // Invoke the myAsyncFunc() function myAsyncFunc() // 'error: Promise rejected!'


Tại sao nên dùng async/await?

Như mình đã nói, async/await có một số ưu điểm vượt trội so với promise:

• Code dễ đọc hơn rất rất nhiều, không cần phải then rồi catch gì cả, chỉ viết như code chạy tuần tự, sau đó dùng try/catch thông thường để bắt lỗi.
• Viết vòng lặp qua từng phần tử trở nên vô cùng đơn giản, chỉ việc await trong mỗi vòng lặp.
• Debug dễ hơn nhiều, vì mỗi lần dùng await được tính là một dòng code, do đó ta có thể đặt debugger để debug từng dòng như thường.
• Khi có lỗi, exception sẽ chỉ ra lỗi ở dòng số mấy chứ không chung chung là un-resolved promise.
• Với promise hoặc callback, việc kết hợp if/else hoặc retry với code asynchnous là một cực hình vì ta phải viết code lòng vòng, rắc rối. Với async/await, việc này vô cùng dễ dàng.

Bất cập của async/await

Tất nhiên, async/await cũng có một số bất cập mà các bạn cần phải lưu ý khi sử dụng:

• Không chạy được trên các trình duyệt cũ. Nếu dự án yêu cầu phải chạy trên các trình duyệt cũ, bạn sẽ phải dùng Babel để transpiler code ra ES5 để chạy.
• Khi ta await một promise bị reject, JavaScript sẽ throw một Exception. Do đó, nếu dùng async await mà quên try catch thì lâu lâu chúng ta sẽ bị… nuốt lỗi hoặc code ngừng chạy.
• async và await bắt buộc phải đi kèm với nhau! await chỉ dùng được trong hàm async, nếu không sẽ bị syntax error. Do đó, async/await sẽ lan dần ra toàn bộ các hàm trong code của bạn.

Kết luận

Cảm ơn các bạn đã theo dõi, chúc ngày lễ tốt lành.

Tham khảo : https://blog.alexdevero.com/javascript-async-await

All rights reserved

Tác giả : Cao Tiến ĐạtEmail : [email protected]ố điện thoại : 0975804410

Mọi ngôn ngữ lập trình đều không hoàn hảo, nó sẽ luôn có những ưu và nhược điểm riêng. Javascript - một trong những ngôn ngữ lập trình phổ biến nhất hiện nay, đã phải trải qua một khoảng thời gian dài khó khăn khi phải dựa vào callbacks để lập trình các đoạn code bất đồng bộ. Sau đó trong bản cập nhật ES7, JavaScript đã đưa ra một giải pháp mới được cộng đồng lập trình rất ủng hộ để giải quyết cái bài toàn bất đồng bộ chính là Async/Await.

Xử lí lỗi với Async/Await

Kết quả bình thường khi bạn sử dụng async/await là một kết quả đã được resolve. Nhưng khi promise bị reject và exception xảy ra thì phải làm gì? Chúng ta có thể dùng try…catch để giải quyết các lỗi này như các hàm bình thường khác.

Ví dụ:

Nếu một promise giải quyết bình thường, sau đó await promise trả về kết quả. Nhưng trong trường hợp từ chối, nó sẽ ném lỗi, giống như có một câu lệnh throw tại dòng đó.


async function f() { await Promise.reject(new Error("Whoops!")); }


Trong tình huống thực tế, lời hứa có thể mất một thời gian trước khi nó từ chối. Trong trường hợp đó sẽ có độ trễ trước khi await đưa ra lỗi.

Chúng ta có thể bắt lỗi đó bằng cách sử dụng try…catch, giống như cách thông thường throw:


async function f() { try { let response = await fetch('http://no-such-url'); } catch(err) { alert(err); // TypeError: failed to fetch } } f();


Async/Await là gì?

Trước đây, để làm việc với code bất đồng bộ, chúng ta sử dụng callback và promise, Async/Await là một cách mới để viết code bất đồng bộ, được Javascript giới thiệu từ bản cập nhật ES7. Nó được xây dựng trên Promise và tương thích với tất cả Promise dựa trên API. Trong đó:

Async được dùng để khai báo một hàm bất đồng bộ. Các hàm bất đồng bộ sẽ luôn trả về một giá trị. Việc sử dụng async chỉ đơn giản là ngụ ý rằng một lời hứa sẽ được trả lại và nếu một lời hứa không được trả lại, JavaScript sẽ tự động kết thúc nó.

Await được sử dụng để chờ một Promise. 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 promise trả về kết quả. Cần lưu ý rằng nó chỉ làm cho khối chức năng không đồng bộ chờ đợi chứ không phải toàn bộ chương trình thực thi.

Async/Await và Promise

Nếu chúng ta xem qua, sẽ nghĩ rằng khi sử dụng Async/Await thì không cần phải sử dụng Promise nửa. Cũng không hẳn là vậy, vì bản chất khi ta sử dụng Async/Await chính là ta sử dụng gián tiếp Promise, khi async function return thì nó sẽ trả về 1 Promise, nếu ta hiểu bản chất sẽ biết cách áp dụng triệt để:


function returnPromise() { return new Promise(function(resolve,reject) { setTimeout(function() { resolve(5) }, 3000) }) } async function asyncFunction() { var result = await returnPromise() return result + 5 } var promise = asyncFunction() promise.then(function (value) { console.log(value) })


Ngoài ra: Chỉ có Promise có thể xử lý các trường hợp Callback ở các thư viện cũ, nên có lúc ta phải tự viết Promise để xử lý vấn đề cũ này.

Cách sử dụng Async/Await hiệu quả

Khi sử dụng Async/Await nó giúp chúng ta nhìn code tường minh hơn vì giúp code trở lại đồng bộ, tuy nhiên nếu quá lạm dụng thì sẽ làm chậm code.

Ví dụ:


function returnResultAfter3Seconds() { return new Promise(function(resolve,reject) { setTimeout(function() { resolve(5) }, 3000) }) } function returnResultAfter5Seconds() { return new Promise(function(resolve,reject) { setTimeout(function() { resolve(5) }, 5000) }) } async function asyncFunction() { var result1 = await returnResultAfter3Seconds() var result2 = await returnResultAfter5Seconds() return result1 + result2 } var promise = asyncFunction() promise.then(function (value) { console.log(value) })


Trong trường hợp này, ta có 2 hàm bất đồng bộ lần lượt mất 3 và 5 giây mới có kết quả, vì asyncFunction sử dụng await lần lượt thì mất đến 8 giây mới có thực hiện xong. Đây là vấn đề khi quá lạm dụng Async/Await khi không hiểu bản chất rõ Javascript, vì sức mạnh của ngôn ngữ Javascript chính là bất đồng bộ, khi ta viết như thế này sẽ không phát huy được tính năng của nó.

Để khắc phục tình trạng này, sử dụng Promise.all để cho 2 function chạy cùng 1 lúc, lúc đó thời gian giảm xuống còn 5 giây


function returnResultAfter3Seconds() { return new Promise(function(resolve,reject) { setTimeout(function() { resolve(5) }, 3000) }) } function returnResultAfter5Seconds() { return new Promise(function(resolve,reject) { setTimeout(function() { resolve(5) }, 5000) }) } async function asyncFunction() { var array = await Promise.all([returnResultAfter3Seconds(), returnResultAfter5Seconds()]) var result = 0 for (var i = 0; i < array.length - 1; i++) { result += array[i] } return result } var promise = asyncFunction() promise.then(function (value) { console.log(value) })


Kết luận

Async/await là 1 trong những tính năng mang tính cách mạng được thêm vào JavaScript trong vài năm gần đây. Nó giúp bạn nhận ra Promise còn thiếu sót như thế nào, cũng như cung cấp giải pháp thay thế.

Có thể bạn quan tâm:

• ES6 là gì? Những nổi bật và sự thay đổi tuyệt vời của ES6
• Mẹo với Javascript (ES6) và thủ thuật để làm cho code sạch hơn, ngắn hơn, và dễ đọc hơn ( Phần 2)
• 12 tips hay cho JavaScript

Xem thêm việc làm JavaScript Developer trên TopDev

TopDev via Hackernoon

Cảm ơn bạn!

async await trong JavaScript là gì? nó giúp ích gì cho chúng ta

Chào các bạn, lại là homiedev đây 😁. Tiếp tục với chủ đề bất đồng bộ (asynchronous) trong JavaScript, hôm nay mình xin giới thiệu đến các bạn từ khóa async/await trong JavaScript nhé. Cùng đọc bài viết thôi nào!

Async/Await là gì?

Async/Await là một tính năng ra đời từ ES7 nhằm giúp ta code bất đồng bộ nhìn trong đồng bộ hơn, giúp code dễ nhìn hơn và dễ sử dụng. Trong đó:

• Async function là một khái niệm định nghĩa cho hàm bất đồng bộ. Hàm bất đồng bộ này sẽ thực hiện tách rời so với phần code còn lại của Event Loop, và trả về một Promise. Cú pháp và cấu trúc của Async function làm nhìn giống chuẩn các hàm đồng bộ.
• Await là một cú pháp giúp tạm dừng (block) code để đợi lấy kết quả từ một Promise (Await không hoạt động với callback), và Await chỉ sử dụng được khi nằm trong Async function.

Ví dụ: Ta sẽ viết 1 function dùng Async/Await để xử lý 1 Promise

• Khai báo function returnPromise khi gọi sẽ return 1 promise, sau 3 giây thì promise sẽ resolve kết quả.
• Khai báo function asyncFunction dùng tính năng async/await, khi gọi function returnPromise sẽ dùng await để đợi kết quả.

Ta sẽ xem kết quả của nó:

Như vậy:

• Khi gọi asyncFunction đầu tiên thì chương trình sẽ log ‘calling’, nhưng khi chương trình await nên chương trình thực hiện log ‘kteam’ tiếp theo.
• Sau 3 giây thì returnPromise có kết quả, lúc đó asyncFunction thực hiện tiếp phần code còn lại.


function returnPromise() { return new Promise(function(resolve,reject) { setTimeout(function() { resolve('finished') }, 3000) }) } async function asyncFunction() { console.log('calling') var result = await returnPromise() console.log(result) } asyncFunction() console.log('kteam')


Javascript async/await

Chúng ta sử dụng từ khóa

async

cho một hàm để thể hiện rằng hàm này là một hàm bất đồng bộ. Hàm

async

trả về một promise.

Cú pháp của hàm

async

là:


async function name(parameter1, parameter2, ...paramaterN) { // ... }


Trong đó:

1. name - tên của chức năng
2. parameters - tham số được truyền cho hàm

Ví dụ về async function:


async function f() { console.log('Async function.'); return Promise.resolve('homiedev.com'); } f();


Kết quả chúng ta nhận được:


Async function. Promise {

: 'homiedev.com'}



Ở ví dụ trên, từ khóa

async

được sử dụng trước function để biểu thị rằng hàm này là bất đồng bộ (vì bên trong chúng ta xử lý bất đồng bộ).

Vì hàm này return một promise, nên có thể sử dụng method

then()

như sau:


async function f() { console.log('Async function.'); return Promise.resolve('homiedev.com'); } f().then(function(result) { console.log(result) });


Kết quả là:


Async function. homiedev.com


Trong ví dụ trên, khi hàm

f()

resolved, method

then()

được thực thi.

JavaScript await

Từ khóa

await

được sử dụng bên trong hàm async để chờ một xử lý bất đồng bộ.

Cú pháp để sử dụng

await

là:


let result = await promise;


Khi sử dụng từ khóa

await

, nó sẽ tạm dừng async function cho đến khi promise return về giá trị kết quả (resolve hoặc reject).

Ví dụ:


let promise = new Promise(function (resolve, reject) { // chờ sau 3 giây thì gọi resolve setTimeout(function () { resolve('Promise resolved') }, 3000); }); // async function async function asyncFunc() { // chờ cho đến khi promise resolve let result = await promise; console.log(result); console.log('homiedev.com'); } // gọi async function asyncFunc();


Kết quả ví dụ trên:


Promise resolved homiedev.com


Ở ví dụ trên, object Promise được tạo và nó sẽ được resolve sau 3 giây. Ở đây, hàm

asyncFunc()

là một async function.

Trong hàm async, chúng ta sử dụng từ khóa

await

để đợi promise hoàn thành (resolve hoặc reject). Bạn có thể hiểu là quá trình này giống khi chúng ta đứng đợi ở trạm xe bus, chúng ta sẽ đứng chờ 5 - 10 phút và khi xe bus đến chúng ta sẽ lên xe và đi tới một địa điểm khác. Quá trình này dừng khi chúng ta đến địa điểm cần đến ^^.

Thêm nữa, dòng chữ

homiedev.com

chỉ được hiển thị sau khi giá trị promise được trả cho biến result ở ví dụ trên.

Nếu ta không sử dụng

await

, dòng chữ

homiedev.com

sẽ hiển thị trước khi Promise resolve.

Chúng ta chỉ có thể sử dụng


await

bên trong

async function

.

Chúng ta cùng xem tiếp một ví dụ sử dụng nhiều promise nhé!

Ví dụ:


let promise1; let promise2; let promise3; async function asyncFunc() { let result1 = await promise1; let result2 = await promise2; let result3 = await promise3; console.log(result1); console.log(result2); console.log(result3); console.log('homiedev.com'); }


Trong đoạn code trên,

await

sẽ chờ từng promise hoàn thành. Và

homiedev.com

sẽ được in ra cuối cùng 😉.

Xử lý lỗi

Trong khi sử dụng async function, chúng ta xử lý code bên trong theo kiểu đồng bộ. Nếu có lỗi trong quá trình xử lý thì chúng ta có thể sử dụng method

catch()

để bắt lỗi.

Ví dụ:


asyncFunc().catch( // Xử lý lỗi tại đây )


Chúng ta còn một cách khác đó là xử lý lỗi sử dụng try ... catch.

Ví dụ:


let promise = new Promise(function (resolve, reject) { setTimeout(function () { reject('Lỗi mất rồi !😢'); }, 3000); }); // async function async function asyncFunc() { try { // promise trả về lỗi ngay sau đó sẽ xử lý lỗi ở catch let result = await promise; console.log(result); } catch(error) { // xử lý lỗi tại đây console.log(error); } } // gọi async function asyncFunc(); // Lỗi mất rồi !😢


Trong ví dụ trên, chúng ta đã sử dụng try ... catch để xử lý các lỗi. Nếu chương trình chạy thành công, nó sẽ chuyển đến khối

try

. Và chương trình throw ra một lỗi, nó sẽ chuyển đến khối

catch

. Ở ví dụ trên promise đã reject nên chương trình sẽ chuyển sang

catch

.

async Function giúp được gì?

1. Giúp cho code dễ đọc hơn là sử dụng callback hay promise.
2. Xử lý lỗi đơn giản hơn.
3. Debug dễ dàng hơn.

Từ khóa


async / await

này đã được giới thiệu trong bản JavaScript (ES8). Một số trình duyệt cũ hơn có thể không hỗ trợ việc sử dụng

async / await

. Các bạn có thể tìm hiểu tại đây.

Async/await Trong JavaScript


Async / await

được giới thiệu bởi ES7 là một cải tiến từ promise mang đến điều tuyệt vời trong

Asynchronous programming

với JavaScript. Nó cung cấp cho các developer js viết mã đồng bộ (synchronous) trên những chức năng không đồng bộ (

asynchonous

), mà không làm gián đoạn code của chính mình. Tuy nhiên không hẳn những developer nào cũng có thể sử dụng chúng một cách hiệu quả và sâu hơn nữa là hiểu cốt lõi của việc sử dụng chúng. Trong bài viết này chúng ta sẽ cùng nhau khám phá về của

async / await

qua các ví dụ.

Async / Await là một tính năng của JavaScript giúp chúng ta làm việc với các hàm bất đồng bộ theo cách thú vị hơn và dễ hiểu hơn. Nó được xây dựng trên

promise

và tương thích với tất cả các

promise

dựa trên API. Đầu tiên chúng ta hãy bắt đầu với

async

trước.

Async/await 101

Với những ai chưa hề nghe qua về Async/await thì đây là những giới thiệu ngắn gọn:

• Async/await là cách mới để viết code bất đồng bộ. Các phương pháp làm việc với code bất đồng bộ trước đây là sử dụng callback và promise.
• Async/await là khái niệm được xây dựng ở tầng trên promise. Do đó nó không thể sử dụng với callback thuần.
• Async/await cũng giống như promise, là non-blocking.
• Async/await làm cho code bất đồng bộ nhìn và chạy gần giống như code đồng bộ.

Keywords searched by users: async await trong javascript

Categories: Có được 10 Async Await Trong Javascript

See more here: kientrucannam.vn

See more: https://kientrucannam.vn/vn/