Cách sử dụng Async/Await trong JavaScript với mã JS mẫu

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. 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, nghĩa là mỗi lần chỉ có thể chạy một tác vụ. Nó có 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 hiểu với một ví dụ.

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

Khi mà First() kết thúc quá trình thực thi, nó sẽ được bật ra khỏi ngăn xếp cuộc gọi và vòng lặp sự kiện sẽ chuyển 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 hiện.

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

Để hiểu rõ hơn, chúng ta hãy xem một ví dụ khác.

console.log('First!');

setTimeout(function second(){
    console.log('Timed Out!')
}, 0000)

console.log('Final!');

Như thường lệ, mã của chúng tôi sẽ di 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ẽ di 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 setTimeout chức năng, 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 SetTimeout và SetInterval chức năng có thể là ví dụ về nhiệm vụ Macro chạy sau khi tất cả các nhiệm vụ khác được hoàn thành.

Cuối cùng, dòng mã cuối cùng sẽ được thực thi. Chúng tôi 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 giờ.

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 làm đối số.

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

const movies = [
{ title: `A New Hope`, body:`After Princess Leia, the leader of the Rebel Alliance, is held hostage by Darth Vader, Luke and Han Solo must free her and destroy the powerful weapon created by the Galactic Empire.`},
{ title: `The Empire Strikes Back`, body: `Darth Vader is adamant about turning Luke Skywalker to the dark side. Master Yoda trains Luke to become a Jedi Knight while his friends try to fend off the Imperial fleet.` }]

function getMovies(){
    setTimeout(() => {
        movies.forEach((movie, index) => {
            console.log(movie.title)
        })
    }, 1000);
}

getMovies();

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

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

const movies = [
        { title: `A New Hope`, body:`After Princess Leia, the leader of the Rebel Alliance, is held hostage by Darth Vader, Luke and Han Solo must free her and destroy the powerful weapon created by the Galactic Empire.`},
        { title: `The Empire Strikes Back`, body: `Darth Vader is adamant about turning Luke Skywalker to the dark side. Master Yoda trains Luke to become a Jedi Knight while his friends try to fend off the Imperial fleet.` }
    ]

function getMovies(){
    setTimeout(() => {
        movies.forEach((movie, index) => {
            console.log(movie.title)
        })
    }, 1000);
}

function createMovies(movie){
    setTimeout(() => {
        movies.push(movie)
    }, 2000);
}

getMovies();


createMovies({ title: `Return of the Jedi`, body:`Luke Skywalker attempts to bring his father back to the light side of the Force. At the same time, the rebels hatch a plan to destroy the second Death Star.` });

Nhưng vấn đề ở đây là chúng tôi không 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(). Các createMovie() chức năng 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 Callbacks.

Trong createPost()chuyển 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 movies = [
        { title: `A New Hope`, body:`After Princess Leia, the leader of the Rebel Alliance, is held hostage by Darth Vader, Luke and Han Solo must free her and destroy the powerful weapon created by the Galactic Empire.`},
        { title: `The Empire Strikes Back`, body: `Darth Vader is adamant about turning Luke Skywalker to the dark side. Master Yoda trains Luke to become a Jedi Knight while his friends try to fend off the Imperial fleet.` }
    ]

function getMovies(){
    setTimeout(() => {
        movies.forEach((movie, index) => {
            console.log(movie.title)
        })
    }, 1000);
}

function createMovies(movie, callback){
    setTimeout(() => {
        movies.push(movie);
        callback();
    }, 2000);
}


createMovies({ title: `Return of the Jedi`, 
                body:`Luke Skywalker attempts to bring his father back to the light side of the Force. 
                At the same time, the rebels hatch a plan to destroy the second Death Star.` }, getMovies);

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

Promise hoạt động như thế nào trong JavaScript?

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

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

• Hoàn thành: onFulfilled() sẽ được gọi (ví dụ, resolve() được gọi là).
• Vật bị loại bỏ: onRejected() sẽ được gọi (ví dụ, reject() được gọi là).
• Chưa giải quyết: chưa hoàn thành hoặc bị từ chối.

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

Lời hứa có hai tham số, 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 movies = [
        { title: `A New Hope`, body:`After Princess Leia, the leader of the Rebel Alliance, is held hostage by Darth Vader, Luke and Han Solo must free her and destroy the powerful weapon created by the Galactic Empire.`},
        { title: `The Empire Strikes Back`, body: `Darth Vader is adamant about turning Luke Skywalker to the dark side. Master Yoda trains Luke to become a Jedi Knight while his friends try to fend off the Imperial fleet.` }
    ]

function getMovies(){
    setTimeout(() => {
        movies.forEach((movie, index) => {
            console.log(movie.title)
        })
    }, 1000);
}

function createMovies(movie){
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            movies.push(movie);

            const error = false;

            if(!error){
                resolve();
            }
            else{
                reject('Error: Something went wrong!')
            }
        }, 2000);
    })
}

createMovies({ title: `Return of the Jedi`, body:`Luke Skywalker attempts to bring his father back to the light side of the Force. At the same time, the rebels hatch a plan to destroy the second Death Star.`})
.then(getMovies);

Nếu chúng tôi gặp lỗi, nó sẽ giống như ‘Lỗi: Đã xảy ra sự cố!’, 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ẽ yêu cầu .then() từ khóa và 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 chức năng không đồng bộ, khiến chương trình đợi cho đến khi Lời hứa được giải quyết.

async function example() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 2000)
  });

  let result = await promise; // wait until the promise resolves (*)

  alert(result); // "done!"
}

example();

Việc thực thi chức năng “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!” trong hai giây.

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

const movies = [
        { title: `A New Hope`, body:`After Princess Leia, the leader of the Rebel Alliance, is held hostage by Darth Vader, Luke and Han Solo must free her and destroy the powerful weapon created by the Galactic Empire.`},
        { title: `The Empire Strikes Back`, body: `Darth Vader is adamant about turning Luke Skywalker to the dark side. Master Yoda trains Luke to become a Jedi Knight while his friends try to fend off the Imperial fleet.` }
    ]

function getMovies(){
    setTimeout(() => {
        movies.forEach((movie, index) => {
            console.log(movie.title)
        })
    }, 1000);
}

function createMovies(movie){
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            movies.push(movie);

            const error = false;

            if(!error){
                resolve();
            }
            else{
                reject('Error: Something went wrong!')
            }
        }, 2000);
    })
}

async function init(){
    await createMovies({ title: `Return of the Jedi`, body:`Luke Skywalker attempts to bring his father back to the light side of the Force. At the same time, the rebels hatch a plan to destroy the second Death Star.`});
    
    getMovies(); (*)
}

init();

Trong ví dụ trên, getMovies() tại createMovies() dòng đang chờ

được thực hiện trong chức năng async. createMovies() Nói cách khác, getMovies() không đồng bộ, vì vậy createMovies() sẽ chỉ chạy theo

được thực hiện.

Bây giờ bạn đã biết tất cả những điều cơ bản về Vòng lặp sự kiện, Gọi lại, Lời hứa và Không đồng bộ/Đang chờ. 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.