Cách sử dụng Async / Await trong JavaScript với mã JS mẫu – javascript cách sử dụng async đang chờ đợi

Trong hướng dẫn này, chúng ta sẽ học cách sử dụng Async / Await trong JavaScript. Nhưng trước khi đến đó, chúng ta nên hiểu một số chủ đề như: 1. Vòng lặp sự kiện 2. Các lệnh gọi lại 3. Lời hứa Vòng lặp sự kiện trong JavaScript là gì? Vòng lặp sự kiện là một trong những vòng quan trọng nhất

Bạn đang xem: javascript cách sử dụng async await

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách sử dụng Async / Hãy chờ đợi trong JavaScript.

Nhưng trước khi đến đó, chúng ta nên hiểu một số chủ đề như:

  1. Vòng lặp sự kiện
  2. Các cuộc gọi lại
  3. < li> Lời hứa

Vòng lặp sự kiện trong JavaScript là gì?

Vòng lặp sự kiện là một trong những vòng lặp sự kiện các khía cạnh quan trọng của JavaScript.

JavaScript là ngôn ngữ lập trình đơn luồng có nghĩa là chỉ có thể chạy một tác vụ tại một thời điểm. Nó có một ngăn xếp cuộc gọi và tất cả mã được thực thi bên trong ngăn xếp cuộc gọi này. Hãy cùng tìm hiểu với một ví dụ.

Pink-Cute-Chic-Vintage-90-Virtual-Trivia-Quiz-Presentations - 8-

Trong ví dụ trên, chúng ta có thể thấy rằng chúng ta đang ghi lại hai giá trị trong bảng điều khiển.

Khi First () kết thúc quá trình thực thi, nó sẽ bật ra khỏi ngăn xếp cuộc gọi và vòng lặp sự kiện sẽ đi xuống dòng tiếp theo. Dòng tiếp theo sẽ được lưu trữ trong ngăn xếp cuộc gọi và sẽ được gắn cờ để thực thi.

Pink-Cute-Chic-Vintage-90-Virtual-Trivia-Quiz-Presentations - 9-

Bảng điều khiển của chúng tôi sẽ in ra kết quả sau:

 Pink-Cute-Chic-Vintage-90-Virtual-Trivia-Quiz- Bản trình bày - 18-

Để hiểu rõ hơn về mọi thứ, hãy xem một ví dụ khác.

  console.log ('Đầu tiên!');

setTimeout (hàm second () {
    console.log ('Hết thời gian chờ!')
}, 0000)

console.log ('Final!');  

Như thường lệ, mã của chúng tôi sẽ chuyển vào ngăn xếp cuộc gọi và vòng lặp sự kiện sẽ lặp lại từng dòng một.

Chúng tôi sẽ nhận được “Đầu tiên!” trong bảng điều khiển và nó sẽ được chuyển ra khỏi ngăn xếp cuộc gọi.

Bây giờ, vòng lặp sự kiện sẽ chuyển đến dòng thứ hai và đẩy nó vào ngăn xếp cuộc gọi. Nó sẽ gặp phải hàm setTimeout , đây là một tác vụ Macro và nó sẽ được thực thi trong Vòng lặp sự kiện tiếp theo.

Và bây giờ, bạn có thể tự hỏi tác vụ Macro là gì. Chà, đó là một nhiệm vụ chạy sau tất cả các nhiệm vụ trong Vòng lặp sự kiện, hoặc bạn có thể nói, trong Vòng lặp sự kiện khác. Các hàm SetTimeout SetInterval có thể là ví dụ về tác vụ Macro chạy sau khi tất cả các tác vụ khác hoàn thành.

Pink-Cute -Chic-Vintage-90-Virtual-Trivia-Quiz-Presentations - 19-

Cuối cùng, dòng mã cuối cùng sẽ được thực thi. Chúng ta sẽ nhận được Đầu tiên trong bảng điều khiển của mình, sau đó là Cuối cùng và sau đó là Hết thời gian.

Các hàm gọi lại hoạt động như thế nào trong JavaScript?

Các hàm gọi lại là những hàm đã được chuyển cho một hàm khác dưới dạng đối số.

Hãy xem một ví dụ.

  const phim = [
{title: `A New Hope`, body:` `Sau khi Công chúa Leia, thủ lĩnh của Liên minh nổi dậy, bị Darth Vader bắt làm con tin, Luke và Han Solo phải giải thoát cho cô ấy và phá hủy vũ khí mạnh mẽ được tạo ra bởi Galactic Empire. '} ,
{title: The Empire Strikes Back`, nội dung: `Darth Vader kiên quyết về việc biến Luke Skywalker sang phe bóng tối. Master Yoda huấn luyện Luke trở thành Hiệp sĩ Jedi trong khi bạn bè của anh cố gắng chống lại hạm đội Hoàng gia.`}]

function getMovies () {
    setTimeout (() = & gt; {
        movies.forEach ((phim, chỉ mục) = & gt; {
            console.log (movie.title)
        })
    }, 1000);
}

getMovies ();  

Chúng tôi có một mảng chứa danh sách các phim Chiến tranh giữa các vì sao và một hàm getMovies () để tìm nạp danh sách.

< img alt = "Pink-Cute-Chic-Vintage-90-Virtual-Trivia-Quiz-Presentations - 20-" class = "kg-image" height = "1080" src = "https://www.freecodecamp.org /news/content/images/2021/02/Pink-Cute-Chic-Vintage-90s-Virtual-Trivia-Quiz-Presentations--20-.png "width =" 1920 "/>

Hãy tạo một hàm khác có tên là createMovie () . Nó sẽ được sử dụng để thêm một bộ phim mới.

  const movies = [
        {title: `A New Hope`, body:` `Sau khi Công chúa Leia, thủ lĩnh của Liên minh nổi dậy, bị Darth Vader bắt làm con tin, Luke và Han Solo phải giải thoát cho cô ấy và phá hủy vũ khí mạnh mẽ được tạo ra bởi Galactic Empire. '} ,
        {title: The Empire Strikes Back`, nội dung: `Darth Vader kiên quyết về việc biến Luke Skywalker sang phe bóng tối. Master Yoda huấn luyện Luke trở thành Hiệp sĩ Jedi trong khi bạn bè của anh cố gắng chống lại hạm đội Hoàng gia. '}
    ]

function getMovies () {
    setTimeout (() = & gt; {
        movies.forEach ((phim, chỉ mục) = & gt; {
            console.log (movie.title)
        })
    }, 1000);
}

function createMovies (movie) {
    setTimeout (() = & gt; {
        movies.push (phim)
    }, 2000);
}

getMovies ();


createMovies. );  

Pink-Cute-Chic-Vintage-90-Virtual-Trivia-Quiz-Presentations - 20--1

Nhưng vấn đề ở đây là chúng tôi không tải được bộ phim thứ ba trên bảng điều khiển. Đó là vì createMovie () mất nhiều thời gian hơn getMovies () . Hàm createMovie () mất hai giây nhưng getMovies () chỉ mất một giây.

Nói cách khác, getMovies () chạy trước createMovies () và danh sách Phim đã được hiển thị.

Để giải quyết vấn đề này, chúng ta có thể sử dụng Gọi lại.

Trong createPost () , chuyển một hàm gọi lại và gọi hàm ngay sau khi phim mới được đẩy (thay vì đợi hai giây).

  const phim = [
        {title: `A New Hope`, body:` `Sau khi Công chúa Leia, thủ lĩnh của Liên minh nổi dậy, bị Darth Vader bắt làm con tin, Luke và Han Solo phải giải thoát cho cô ấy và phá hủy vũ khí mạnh mẽ được tạo ra bởi Galactic Empire. '} ,
        {title: The Empire Strikes Back`, nội dung: `Darth Vader kiên quyết về việc biến Luke Skywalker sang phe bóng tối. Master Yoda huấn luyện Luke trở thành Hiệp sĩ Jedi trong khi bạn bè của anh cố gắng chống lại hạm đội Hoàng gia. '}
    ]

function getMovies () {
    setTimeout (() = & gt; {
        movies.forEach ((phim, chỉ mục) = & gt; {
            console.log (movie.title)
        })
    }, 1000);
}

function createMovies (movie, callback) {
    setTimeout (() = & gt; {
        phim.push (phim);
        gọi lại();
    }, 2000);
}


createMovies ({title: `Sự trở lại của Jedi`,
                body: Luke Skywalker cố gắng đưa cha mình trở lại mặt ánh sáng của Thần lực.
                Cùng lúc đó, quân nổi dậy lên kế hoạch tiêu diệt Death Star thứ hai.`}, getMovies);  

Pink-Cute-Chic-Vintage-90-Virtual-Trivia- Câu hỏi-Trình bày - 21--2

Bây giờ chúng tôi nhận được danh sách cập nhật các bộ phim.

Lời hứa hoạt động như thế nào trong JavaScript?

Lời hứa là một giá trị có thể tạo ra giá trị trong tương lai. Giá trị đó có thể được giải quyết hoặc không được giải quyết (trong một số trường hợp lỗi, như lỗi mạng). Nó hoạt động giống như một lời hứa trong đời thực.

Nó có ba trạng thái: đã hoàn thành, bị từ chối hoặc đang chờ xử lý.

  • Đã thực hiện: onFulfilled () sẽ được gọi (ví dụ: serve () đã được gọi).
  • Bị từ chối: onRejected () sẽ được gọi (ví dụ: allow () được gọi).
  • < strong> Đang chờ xử lý: chưa được đáp ứng hoặc bị từ chối.

Hãy xem một ví dụ.

Lời hứa có hai tham số, hãy giải quyết và từ chối. Khi xảy ra sự cố, từ chối được gọi hoặc giải pháp khác được gọi.

 const phim = [
        {title: `A New Hope`, body:` `Sau khi Công chúa Leia, thủ lĩnh của Liên minh nổi dậy, bị Darth Vader bắt làm con tin, Luke và Han Solo phải giải thoát cho cô ấy và phá hủy vũ khí mạnh mẽ được tạo ra bởi Galactic Empire. '} ,
        {title: The Empire Strikes Back`, nội dung: `Darth Vader kiên quyết về việc biến Luke Skywalker sang phe bóng tối. Master Yoda huấn luyện Luke trở thành Hiệp sĩ Jedi trong khi bạn bè của anh cố gắng chống lại hạm đội Hoàng gia. '}
    ]

function getMovies () {
    setTimeout (() = & gt; {
        movies.forEach ((phim, chỉ mục) = & gt; {
            console.log (movie.title)
        })
    }, 1000);
}

function createMovies (movie) {
    trả lại Lời hứa mới ((giải quyết, từ chối) = & gt; {
        setTimeout (() = & gt; {
            phim.push (phim);

            const error = false;

            if (! error) {
                giải quyết();
            }
            khác{
                từ chối ('Lỗi: Đã xảy ra lỗi!')
            }
        }, 2000);
    })
}

createMovies. )
.then (getMovies);  

Nếu chúng tôi gặp lỗi, nó sẽ giống như 'Lỗi: Đã xảy ra lỗi!' và nếu không, lời hứa sẽ giải quyết.

Khi lời hứa được giải quyết, nó sẽ gọi từ khóa .then () getMovies () .

Cuối cùng, Async / Await hoạt động như thế nào trong JavaScript

Async có nghĩa là không đồng bộ. Nó cho phép một chương trình chạy một chức năng mà không đóng băng toàn bộ chương trình. Điều này được thực hiện bằng cách sử dụng từ khóa Async / Await.

Async / Await giúp viết lời hứa dễ dàng hơn. Từ khóa ‘async’ trước một hàm làm cho hàm luôn trả về một lời hứa. Và từ khóa await được sử dụng bên trong các hàm không đồng bộ, khiến chương trình đợi cho đến khi Lời hứa được giải quyết.

  hàm async example () {

  let Promise = new Promise ((giải quyết, từ chối) = & gt; {
    setTimeout (() = & gt; Resolution ("xong!"), 2000)
  });

  hãy để kết quả = chờ đợi lời hứa; // đợi cho đến khi lời hứa giải quyết xong (*)

  alert (kết quả); // "xong!"
}

example ();  

Việc thực thi hàm “tạm dừng” tại dòng (*) và tiếp tục khi lời hứa được thực hiện, với result trở thành kết quả của nó. Vì vậy, đoạn mã trên hiển thị "đã xong!" sau hai giây.

Hãy xem một ví dụ thực hành.

  const phim = [
        {title: `A New Hope`, body:` `Sau khi Công chúa Leia, thủ lĩnh của Liên minh nổi dậy, bị Darth Vader bắt làm con tin, Luke và Han Solo phải giải thoát cho cô ấy và phá hủy vũ khí mạnh mẽ được tạo ra bởi Galactic Empire. '} ,
        {title: The Empire Strikes Back`, nội dung: `Darth Vader kiên quyết về việc biến Luke Skywalker sang phe bóng tối. Master Yoda huấn luyện Luke trở thành Hiệp sĩ Jedi trong khi bạn bè của anh cố gắng chống lại hạm đội Hoàng gia. '}
    ]

function getMovies () {
    setTimeout (() = & gt; {
        movies.forEach ((phim, chỉ mục) = & gt; {
            console.log (movie.title)
        })
    }, 1000);
}

function createMovies (movie) {
    trả lại Lời hứa mới ((giải quyết, từ chối) = & gt; {
        setTimeout (() = & gt; {
            phim.push (phim);

            const error = false;

            if (! error) {
                giải quyết();
            }
            khác{
                từ chối ('Lỗi: Đã xảy ra lỗi!')
            }
        }, 2000);
    })
}

hàm async init () {
    await createMovies ({title: `Return of the Jedi`, body:` `Luke Skywalker cố gắng đưa cha mình trở lại mặt ánh sáng của Thần lực. Đồng thời, những kẻ nổi loạn nảy ra kế hoạch tiêu diệt Death Star thứ hai." });
    
    getMovies (); (*)
}

init ();  

Trong ví dụ trên, getMovies () tại dòng (*) đang đợi createMovies () được thực thi trong hàm không đồng bộ.

Nói cách khác, createMovies () là không đồng bộ, vì vậy getMovies () sẽ chỉ chạy sau createMovies () là xong.

Bây giờ bạn đã biết tất cả các kiến ​​thức cơ bản về Vòng lặp sự kiện, Gọi lại, Hứa hẹn và Không đồng bộ / Chờ đợi. Các tính năng này đã được giới thiệu trong ECMAScript 2017 và chúng đã giúp việc đọc và viết mã JS trở nên dễ dàng và hiệu quả hơn nhiều.

Đó là tất cả mọi người! Chúc bạn học tập và thử nghiệm vui vẻ,


Xem thêm những thông tin liên quan đến chủ đề javascript cách sử dụng async đang chờ đợi

Javascript Promises vs Async Await EXPLAINED (in 5 minutes)

alt

  • Tác giả: Roberts Dev Talk
  • Ngày đăng: 2021-08-18
  • Đánh giá: 4 ⭐ ( 5960 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this tutorial I explain what Javascript promises are, why we need them, and how to use them, catch errors properly and then convert the same code to use async and await. With examples!

    Check out the Bored API for fun sample data:
    https://www.boredapi.com/

    ☕️ Don't forget, old developers need coffee (and.. beer and pizza too 🍺 🍕)
    https://www.buymeacoffee.com/Robertsdevtalk

    📧 📫 Join us on our developer journey! Sign up to our email newsletter:
    https://robertsdevtalk.com

    🐦 Follow us on Twitter:
    https://twitter.com/robertsdevtalk

    🎶 Music by Epidemic Sound:
    https://www.epidemicsound.com/referral/rkhnun/

    Our gear - click through to support our channel! 🙂

    Camera (Canon M50)
    🇬🇧 UK: https://amzn.to/3sUbzuL
    🇺🇸 US: https://amzn.to/3uBsG5c

    Camera mic (RODE VideoMic Pro)
    🇬🇧 UK: https://amzn.to/3ml8xgC
    🇺🇸 US: https://amzn.to/2RkGxyi

    Camera tripod (Manfrotto Compact tripod):
    🇬🇧 UK: https://amzn.to/3fJGyWU
    🇺🇸 US: https://amzn.to/3mF4oV2

    Voiceover Mic (Blue Yeti)
    🇬🇧 UK: https://amzn.to/2PV7UOQ
    🇺🇸 US: https://amzn.to/3uMiEym

    Chris's dev mouse for PC (Logitech MX Master 3)
    🇬🇧 UK: https://amzn.to/39K7BNV
    🇺🇸 US: https://amzn.to/3uKYvso

    Chris's dev keyboard for PC (Logitech MX Keys)
    🇬🇧 UK: https://amzn.to/3rSbHcX
    🇺🇸 US: https://amzn.to/3a6Unef

    Rob's dev keyboard for Mac (Apple Magic Keyboard)
    🇬🇧 UK: https://amzn.to/3dEQpKG
    🇺🇸 US: https://amzn.to/3sb6JZc

    Rob's dev mouse for Mac (Apple Magic Mouse)
    🇬🇧 UK: https://amzn.to/3sRCQhr
    🇺🇸 US: https://amzn.to/3mFi6qS

    Icons in this video kindly provided by FlatIcon from Freepik
    https://www.freepik.com
    https://www.flaticon.com

    JS icon provided by Icon8 https://icons8.com

    Disclaimer - some of our links are affiliate links, which means that we receive a small commission for any sales made via those links, at no extra cost to you - so a great way to support our channel! Thank you so much for your support 😊

    javascript promises async

Giải Thích về Async/Await Javascript

  • Tác giả: hoclaptrinh.vn
  • Đánh giá: 5 ⭐ ( 4385 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 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

await trong Javascript » Cafedev.vn

  • Tác giả: cafedev.vn
  • Đánh giá: 5 ⭐ ( 1597 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Có một cú pháp đặc biệt để làm việc với những lời hứa theo cách thoải mái hơn, được gọi là async / await. Thật đáng ngạc nhiên dễ hiểu và sử dụng.

Await Javascript trong 10 phút

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 4697 lượt đánh giá )
  • Khớp với kết quả tìm kiế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ủ...

Async/await Trong JavaScript

  • Tác giả: suntech.edu.vn
  • Đánh giá: 4 ⭐ ( 5509 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 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.

Async/Await trong JavaScript và keyword giúp code đồng bộ đơn giản hơn

  • Tác giả: freelancervietnam.vn
  • Đánh giá: 4 ⭐ ( 4300 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong phiên bản ES7, JavaScript đã đem đến cộng đồng lập trình một tính năng ưu việt cực kì được ủng hộ và mong chờ là Async và Await dựa trên Promise.

Vòng lặp trong Javascript: Làm cách nào sử dụng async

  • Tác giả: www.noron.vn
  • Đánh giá: 5 ⭐ ( 6132 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Noron - Mạng hỏi đáp Việt

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  4 cách để tạo một đối tượng trong JavaScript (với các ví dụ) - javascript tạo đối tượng biểu mẫu