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

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 đang chờ hàm không đồng bộ

Trong hướng dẫn này, chúng ta sẽ tìm hiểu 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 cuộc 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 khía cạnh quan trọng nhất 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 đang chờ hàm async

How do I return a result from an asynchronous function call?

alt

  • Tác giả: SkillsReactor
  • Ngày đăng: 2020-11-18
  • Đánh giá: 4 ⭐ ( 3653 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: We look at how returning an asynchronous value result from a function call in JavaScript can be difficult, and options that are available to return these type of values. CORRECTION BELOW.

    The final call should be "await fooAsync()" instead of "await fooPromise()", because our fooAsync was the async function.

    00:00 SkillsReactor
    00:08 Introduction
    00:17 Example problem using jQuery ajax call
    01:29 Using callback functions
    01:42 jQuery jqXHR deferred object
    02:19 JavaScript native promise
    03:21 Executing code that returns a promise
    03:42 Async and await
    04:12 Calling async function using await (correction in description)
    04:25 Try catch around await

Async/Await là gì ? Tính năng tuyệt vời của Javascript

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

[JS] async-await đơn giản

  • Tác giả: kipalog.com
  • Đánh giá: 4 ⭐ ( 6635 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 1. Giới thiệu Với các đặc tả JavaScript cũ, ta phải sử dụng các hàm phản hồi để xử lý các thao tác bất đồng bộ. Tuy nhiên việc này dẫn tới tình tr...

6 Lý do Async/Await của Javascript đánh bại Promises

  • Tác giả: topdev.vn
  • Đánh giá: 5 ⭐ ( 5920 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong trường hợp bạn đã quên mất, Node.js đã hỗ trợ async await vs promises kể từ phiên bản 7.6. Nếu bạn chưa thử qua, bài viết này sẽ liệt kê các lý do cùng ví dụ để giải thích tại sao bạn nên chọn nó.

Async/Await Trong Javascript Có Làm Khó Được Bạn?

  • Tác giả: codelearn.io
  • Đánh giá: 3 ⭐ ( 9866 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đây là cặp keyword vô cùng mạnh mẽ trong Javascript. Hiểu được Async/Await sẽ giúp chúng ta viết code dễ dàng, ngắn gọn và hiệu quả hơn nhiều.

async function - JavaScript

  • Tác giả: developer.mozilla.org
  • Đánh giá: 3 ⭐ ( 2357 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: An async function is a function declared with the async keyword, and the await keyword is permitted within it. The async and await keywords enable asynchronous, promise-based behavior to be written in a cleaner style, avoiding the need to explicitly configure promise chains.

Await Javascript trong 10 phút

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 4409 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ủ...

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  Các ví dụ HTML tốt nhất và các ví dụ HTML5 - ví dụ về mã html