Rate this post

Bất đồng bộ (asynchronous) trong JavaScript là một khái niệm quan trọng khi xử lý các tác vụ mà không muốn chặn luồng chính của chương trình. Điều này cho phép bạn tiếp tục chạy các tác vụ khác trong khi một tác vụ đang chạy.

Trong JavaScript, một số hàm được thiết kế để chạy bất đồng bộ, ví dụ như setTimeout(), setInterval(), fetch(), và XMLHttpRequest(). Khi sử dụng các hàm này, chúng sẽ không chặn luồng chính của chương trình và cho phép các tác vụ khác tiếp tục chạy. Ví dụ, sử dụng setTimeout(callback, delay) sẽ chạy hàm callback sau khoảng thời gian delay được chỉ định, cho phép chương trình tiếp tục chạy trong khi đang chờ cho hàm callback được gọi.

Các bài viết liên quan:

Cách sử dụng điều này có thể giúp tránh chặn luồng chính của chương trình khi xử lý các tác vụ mà có thể mất nhiều thời gian hoặc cần liên tục cập nhật, ví dụ như tải dữ liệu từ một máy chủ, gửi dữ liệu đến một máy chủ, hoặc chạy một hàm mỗi khoảng thời gian nhất định.

Đồng thời nó còn cho phép chúng ta sử dụng các callback functions , promise , async-await để quản lý luồng các hành động đồng bộ , không bị chặn và quản lý kết quả trả về từ các hàm bất đồng bộ .

Tại sao nên sử dụng bất đồng bộ ?

Sử dụng bất đồng bộ trong JavaScript có nhiều lợi ích.

  • Tiếp tục chạy các tác vụ khác trong khi một tác vụ đang chạy: Khi sử dụng các hàm bất đồng bộ, chúng sẽ không chặn luồng chính của chương trình và cho phép các tác vụ khác tiếp tục chạy. Điều này có thể giúp tránh việc chương trình bị chặn khi xử lý một tác vụ mà có thể mất nhiều thời gian.
  • Tăng hiệu suất và trải nghiệm người dùng: Khi sử dụng bất đồng bộ, chương trình có thể tiếp tục chạy mà không chờ đợi cho một tác vụ nào đó hoàn thành. Điều này có thể giúp tăng hiệu suất và tạo ra trải nghiệm người dùng tốt hơn.
  • Xử lý các tác vụ liên tục và định kỳ: Sử dụng các hàm bất đồng bộ như setInterval() hoặc setTimeout() và chúng cho phép bạn chạy các tác vụ liên tục hoặc định kỳ mà không chặn luồng chính của chương trình. Ví dụ, bạn có thể sử dụng setInterval() để cập nhật dữ liệu mỗi khoảng thời gian nhất định mà không làm chương trình bị chặn.
  • Sử dụng callback function, promise, async-await để quản lý các hành động trong chương trình

Với những lợi ích trên , chúng ta nên sử dụng bất đồng bộ trong javascript để tăng hiệu suất và tối ưu hóa chương trình .

Sử dụng bất đồng bộ trong JavaScript như thế nào ?

Có nhiều cách sử dụng bất đồng bộ trong JavaScript, một số cách thông dụng nhất là:

  • Callback function: Là một hàm được truyền vào một hàm khác như là một tham số và được gọi sau khi một tác vụ bất đồng bộ hoàn thành.
setTimeout(() => {

    console.log("Hello World!");

}, 2000);

);

  • Promise : là một đối tượng mà chứa kết quả của một tác vụ bất đồng bộ và cung cấp các phương thức then, catch, và finally để xử lý kết quả.
fetch("data.json")

    .then(response => response.json())

    .then(data => {

        // Do something with data

    })

    .catch(error => {

        // Handle errors

    });

Async-await : là một cách để viết các hàm bất đồng bộ một cách dễ đọc hơn và giống như cách thức sử dụng các hàm đồng bộ.

async function getData() {

    try {

        const response = await fetch("data.json");

        const data = await response.json();

        // Do something with data

    } catch (error) {

        // Handle errors

    }

}

Trong đó các cách sử dụng callback function là cách sử dụng cũ nhất và có thể dễ gặp phải vấn đề callback hell (phần callback gặp nhau quá nhiều), sau đó có promise mới ra để giải quyết vấn đề, còn cuối cùng là async-await là cách sử dụng bất đồng bộ mới nhất và có độ đọc gần giống với cách sử dụng đồng bộ. Nó giúp viết code dễ đọc hơn và giảm đi sự rối mắt khi sử dụng callback function hay promise.

Trong các trường hợp tương tự như trên, người dùng có thể tùy chọn dựa trên nhu cầu, khả năng và kiến thức để sử dụng các cách trên.

Khi nào nên sử dụng bất đồng bộ ?

  • Khi muốn tiếp tục chạy các tác vụ khác trong khi một tác vụ đang chạy: Ví dụ như tải dữ liệu từ một máy chủ hoặc gửi dữ liệu đến một máy chủ.
  • Khi muốn tăng hiệu suất và trải nghiệm người dùng: Ví dụ như khi chạy một hàm mỗi khoảng thời gian nhất định mà không chặn luồng chính của chương trình.
  • Khi muốn xử lý các tác vụ liên tục và định kỳ: Ví dụ như chạy một hàm mỗi khoảng thời gian nhất định.
  • Khi muốn sử dụng callback function, promise, async-await để quản lý luồng các hành động trong chương trình, và giải quyết vấn đề callback hell.
  • Khi muốn tối ưu hóa chương trình, giảm sự rối mắt, tăng độ đọc cho chương trình.

Cần lưu ý rằng, sử dụng bất đồng bộ cũng có thể gây ra một số vấn đề nếu không được sử dụng đúng cách. Ví dụ, nếu sử dụng quá nhiều callback function hay promise có thể dẫn đến một trạng thái gọi đến nhau (callback hell) và khiến chương trình trở nên khó đọc và quản lý.

Ngoài ra, khi sử dụng bất đồng bộ cần phải chú ý xử lý các trường hợp bất ngờ, như xử lý lỗi hoặc giải quyết các vấn đề liên quan đến chuỗi thời gian.

Ví dụ về các trường hợp sử dụng bất đồng bộ trong JavaScript 

Ví dụ: Sử dụng setTimeout để chạy một hàm sau một khoảng thời gian nhất định.

// Tạo hàm cần chạy sau khoảng thời gian nhất định

function delayedHello() {

  console.log("Hello, World!");

}

// Sử dụng setTimeout để chạy hàm sau 2 giây

setTimeout(delayedHello, 2000);

Ví dụ: Sử dụng async-await để chạy một hàm bất đồng bộ

async function asyncTask() {

  console.log("Start Asynchronous task");

  let data = await fetch("https://jsonplaceholder.typicode.com/todos/1");

  let json = await data.json();

  console.log(json);

}

asyncTask();

Ví dụ: Sử dụng Interval để chạy hàm sau một khoảng thời gian nhất định

// Tạo hàm cần chạy sau khoảng thời gian nhất định

function printTime() {

  console.log(new Date().toLocaleTimeString());

}

// Chạy hàm printTime sau mỗi 1 giây

setInterval(printTime, 1000);

Đây là một vài ví dụ về cách sử dụng bất đồng bộ trong javascript. Có rất nhiều cách khác nhau để sử dụng bất đồng bộ và tùy vào tình huống cụ thể mà chúng ta sẽ lựa chọn cách thích hợp.

Kết luận

Sử dụng bất đồng bộ trong javascript là một kĩ thuật quan trọng để xử lý các tác vụ liên quan đến luồng và giải quyết vấn đề callback hell. Nhưng cần có sự chú ý và kỹ thuật trong việc sử dụng để đạt được hiệu quả tối đa.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Contact Me on Zalo
Call now