programming javascript

Javascript xử lý mã không đồng bộ như thế nào?

Nếu bạn đã học JavaScript được một thời gian, thì có lẽ bạn đã từng nghe thuật ngữ "không đồng bộ" trước đây.

Điều này là do JavaScript là một ngôn ngữ không đồng bộ. Nhưng điều đó thực sự có ý nghĩa gì?

Đồng bộ vs Không đồng bộ

Trước khi bắt đầu tìm hiểu vấn đề thực sự, hãy xem xét hai từ này – đồng bộ và không đồng bộ

Theo mặc định, JavaScript là ngôn ngữ lập trình đơn luồng, đồng bộ. Điều này có nghĩa là các lệnh chỉ có thể chạy lần lượt và không chạy song song. Hãy xem xét đoạn mã nhỏ bên dưới

let a = 1;
let b = 2;
let sum = a + b;
console.log[sum];

Đoạn mã trên khá đơn giản – nó tính tổng hai số và sau đó ghi tổng vào bảng điều khiển trình duyệt. Trình thông dịch thực hiện lần lượt các lệnh này theo thứ tự đó cho đến khi thực hiện xong

Nhưng phương pháp này đi kèm với nhược điểm. Giả sử chúng tôi muốn lấy một số lượng lớn dữ liệu từ cơ sở dữ liệu và sau đó hiển thị nó trên giao diện của chúng tôi. Khi trình thông dịch đạt được hướng dẫn tìm nạp dữ liệu này, phần còn lại của mã sẽ bị chặn thực thi cho đến khi dữ liệu được tìm nạp và trả về

Bây giờ bạn có thể nói rằng dữ liệu được tìm nạp không quá lớn và sẽ không mất nhiều thời gian đáng chú ý. Hãy tưởng tượng rằng bạn phải tìm nạp dữ liệu ở nhiều điểm khác nhau. Sự chậm trễ này cộng lại không giống như điều gì đó mà người dùng muốn gặp phải

May mắn cho chúng tôi, các vấn đề với JavaScript đồng bộ đã được giải quyết bằng cách giới thiệu JavaScript không đồng bộ

Hãy coi mã không đồng bộ là mã có thể bắt đầu ngay bây giờ và kết thúc quá trình thực thi sau. Khi JavaScript đang chạy không đồng bộ, các hướng dẫn không nhất thiết phải được thực thi lần lượt như chúng ta đã thấy trước đây

Để thực hiện đúng hành vi không đồng bộ này, có một vài giải pháp khác nhau mà các nhà phát triển đã sử dụng trong nhiều năm. Mỗi giải pháp cải thiện so với giải pháp trước đó, giúp mã được tối ưu hóa hơn và dễ hiểu hơn trong trường hợp mã trở nên phức tạp

Để hiểu rõ hơn về bản chất không đồng bộ của JavaScript, chúng ta sẽ xem qua các chức năng gọi lại, lời hứa và không đồng bộ và chờ đợi

Gọi lại trong JavaScript là gì?

Gọi lại là một chức năng được truyền bên trong một chức năng khác, sau đó được gọi trong chức năng đó để thực hiện một tác vụ

Gây nhầm lẫn?

console.log['fired first'];
console.log['fired second'];

setTimeout[[]=>{
    console.log['fired third'];
},2000];

console.log['fired last'];

Đoạn mã trên là một chương trình nhỏ ghi nội dung vào bảng điều khiển. Nhưng có một cái gì đó mới ở đây. Trình thông dịch sẽ thực thi lệnh đầu tiên, sau đó là lệnh thứ hai, nhưng nó sẽ bỏ qua lệnh thứ ba và thực hiện lệnh cuối cùng.

fired first
fired second
fired last
fired third

0 là một hàm JavaScript có hai tham số. Tham số đầu tiên là một hàm khác và tham số thứ hai là thời gian sau đó hàm đó sẽ được thực thi tính bằng mili giây. Bây giờ bạn thấy định nghĩa về các cuộc gọi lại sắp ra mắt

Hàm bên trong

fired first
fired second
fired last
fired third

0 trong trường hợp này được yêu cầu chạy sau hai giây [2000 mili giây]. Hãy tưởng tượng nó được mang đi thực thi trong một phần riêng biệt nào đó của trình duyệt, trong khi các lệnh khác tiếp tục thực hiện. Sau hai giây, kết quả của hàm sau đó được trả về

Đó là lý do tại sao nếu chúng tôi chạy đoạn mã trên trong chương trình của mình, chúng tôi sẽ nhận được điều này

fired first
fired second
fired last
fired third

Bạn thấy rằng lệnh cuối cùng được ghi lại trước khi hàm trong

fired first
fired second
fired last
fired third

0 trả về kết quả của nó. Giả sử chúng tôi đã sử dụng phương pháp này để lấy dữ liệu từ cơ sở dữ liệu. Trong khi người dùng đang chờ lệnh gọi cơ sở dữ liệu trả về kết quả, luồng thực thi sẽ không bị gián đoạn

Phương pháp này rất hiệu quả, nhưng chỉ đến một điểm nhất định. Đôi khi, các nhà phát triển phải thực hiện nhiều cuộc gọi đến các nguồn khác nhau trong mã của họ. Để thực hiện các cuộc gọi này, các cuộc gọi lại đang được lồng vào nhau cho đến khi chúng trở nên rất khó đọc hoặc khó duy trì. Điều này được gọi là Địa ngục gọi lại

Để khắc phục vấn đề này, lời hứa đã được giới thiệu

Lời hứa trong JavaScript là gì?

Chúng ta luôn nghe mọi người hứa hẹn. Người anh họ của bạn, người đã hứa sẽ gửi cho bạn tiền miễn phí, một đứa trẻ hứa sẽ không chạm vào lọ bánh quy nữa khi chưa được phép. nhưng lời hứa trong JavaScript hơi khác một chút

Một lời hứa, trong bối cảnh của chúng tôi, là điều gì đó sẽ mất một thời gian để thực hiện. Có hai kết quả có thể xảy ra của một lời hứa

Chúng tôi hoặc chạy và giải quyết lời hứa, hoặc
Một số lỗi xảy ra dọc theo dòng và lời hứa bị từ chối

Các lời hứa đã xuất hiện để giải quyết các vấn đề về chức năng gọi lại. Một lời hứa có hai chức năng làm tham số. Đó là,

console.log['fired first'];
console.log['fired second'];

setTimeout[[]=>{
    console.log['fired third'];
},2000];

console.log['fired last'];

2 và

console.log['fired first'];
console.log['fired second'];

setTimeout[[]=>{
    console.log['fired third'];
},2000];

console.log['fired last'];

3. Hãy nhớ rằng giải quyết là thành công và từ chối là khi xảy ra lỗi

Cùng điểm qua những lời hứa trong công việc

const getData = [dataEndpoint] => {
   return new Promise [[resolve, reject] => {
     //some request to the endpoint;
     
     if[request is successful]{
       //do something;
       resolve[];
     }
     else if[there is an error]{
       reject[];
     }
   
   }];
};

Đoạn mã trên là một lời hứa, kèm theo một yêu cầu tới một số điểm cuối. Lời hứa diễn ra trong

console.log['fired first'];
console.log['fired second'];

setTimeout[[]=>{
    console.log['fired third'];
},2000];

console.log['fired last'];

2 và

console.log['fired first'];
console.log['fired second'];

setTimeout[[]=>{
    console.log['fired third'];
},2000];

console.log['fired last'];

3 như tôi đã đề cập trước đây

Ví dụ: sau khi thực hiện cuộc gọi đến điểm cuối, nếu yêu cầu thành công, chúng tôi sẽ giải quyết lời hứa và tiếp tục làm bất cứ điều gì chúng tôi muốn với phản hồi. Nhưng nếu có lỗi, lời hứa sẽ bị từ chối

Lời hứa là một cách gọn gàng để khắc phục sự cố do gọi lại địa ngục gây ra, theo một phương pháp được gọi là chuỗi lời hứa. Bạn có thể sử dụng phương pháp này để lấy dữ liệu tuần tự từ nhiều điểm cuối, nhưng với ít mã hơn và phương pháp dễ dàng hơn

Nhưng có một cách thậm chí còn tốt hơn. Bạn có thể quen thuộc với phương pháp sau, vì đây là cách ưa thích để xử lý dữ liệu và lệnh gọi API trong JavaScript

Async và Await trong JavaScript là gì?

Vấn đề là, xâu chuỗi các lời hứa với nhau giống như các cuộc gọi lại có thể trở nên khá cồng kềnh và khó hiểu. Đó là lý do Async và Await ra đời

Để xác định chức năng không đồng bộ, bạn làm điều này

________số 8

Lưu ý rằng việc gọi một chức năng không đồng bộ sẽ luôn trả về một Lời hứa. Hãy xem này

const test = asyncFunc[];
console.log[test];

Chạy phần trên trong bảng điều khiển trình duyệt, chúng tôi thấy rằng

console.log['fired first'];
console.log['fired second'];

setTimeout[[]=>{
    console.log['fired third'];
},2000];

console.log['fired last'];

6 trả về một lời hứa

Hãy thực sự phá vỡ một số mã ngay bây giờ. Hãy xem xét đoạn trích nhỏ dưới đây

console.log['fired first'];
console.log['fired second'];

setTimeout[[]=>{
    console.log['fired third'];
},2000];

console.log['fired last'];

Từ khóa

console.log['fired first'];
console.log['fired second'];

setTimeout[[]=>{
    console.log['fired third'];
},2000];

console.log['fired last'];

7 là từ chúng ta sử dụng để định nghĩa các hàm async như tôi đã đề cập ở trên. Nhưng còn

console.log['fired first'];
console.log['fired second'];

setTimeout[[]=>{
    console.log['fired third'];
},2000];

console.log['fired last'];

8 thì sao? . Khi lời hứa đã được giải quyết, giờ đây, kết quả từ phương thức tìm nạp có thể được gán cho biến phản hồi

Điều tương tự xảy ra trên dòng 3. Phương thức

fired first
fired second
fired last
fired third

0 trả về một lời hứa và chúng ta vẫn có thể sử dụng

console.log['fired first'];
console.log['fired second'];

setTimeout[[]=>{
    console.log['fired third'];
},2000];

console.log['fired last'];

8 để trì hoãn việc gán cho đến khi lời hứa được giải quyết

Chặn mã hay không chặn mã

Khi tôi nói 'đình trệ', bạn phải nghĩ rằng việc triển khai Async và Await bằng cách nào đó sẽ chặn việc thực thi mã. Bởi vì nếu yêu cầu của chúng tôi mất quá nhiều thời gian thì sao?

Thực tế là, nó không. Mã bên trong hàm async đang chặn, nhưng điều đó không ảnh hưởng đến việc thực thi chương trình theo bất kỳ cách nào. Việc thực thi mã của chúng tôi không đồng bộ hơn bao giờ hết. Để thể hiện điều này,

console.log['fired first'];
console.log['fired second'];

setTimeout[[]=>{
    console.log['fired third'];
},2000];

console.log['fired last'];

Trong bảng điều khiển trình duyệt của chúng tôi, đầu ra ở trên sẽ giống như thế này

console.log['fired first'];
console.log['fired second'];

setTimeout[[]=>{
    console.log['fired third'];
},2000];

console.log['fired last'];

Bạn thấy rằng khi chúng ta gọi

console.log['fired first'];
console.log['fired second'];

setTimeout[[]=>{
    console.log['fired third'];
},2000];

console.log['fired last'];

6, mã của chúng ta tiếp tục chạy cho đến khi hàm trả về kết quả

Phần kết luận

Bài viết này không xử lý sâu các khái niệm này, nhưng tôi hy vọng nó cho bạn thấy JavaScript không đồng bộ đòi hỏi gì và một số điều cần chú ý

Nó là một phần rất thiết yếu của JavaScript, và bài viết này chỉ vạch ra bề nổi. Tuy nhiên, tôi hy vọng bài viết này đã giúp phá vỡ những khái niệm này

QUẢNG CÁO

Njong Emy

Kỹ thuật máy tính đại học, tập trung vào phát triển frontend. HTML/CSS/Bootstrap/JS/Tailwind. Nghiện Canva quá. ]

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Lập trình không đồng bộ hoạt động như thế nào trong JavaScript?

Lập trình không đồng bộ là một kỹ thuật cho phép chương trình của bạn bắt đầu một tác vụ có khả năng chạy lâu và vẫn có thể đáp ứng các sự kiện khác trong khi tác vụ đó chạy, thay vì phải . Khi nhiệm vụ đó đã hoàn thành, chương trình của bạn sẽ hiển thị kết quả. . Once that task has finished, your program is presented with the result.

Làm cách nào để quản lý mã không đồng bộ trong JavaScript?

JavaScript cung cấp ba phương thức xử lý mã không đồng bộ. các lệnh gọi lại, cho phép bạn cung cấp các hàm để gọi sau khi phương thức không đồng bộ chạy xong; . , which are just some syntactic sugar over promises.

JavaScript có hỗ trợ lập trình không đồng bộ không?

JavaScript là ngôn ngữ lập trình đồng thời, không chặn, không đồng bộ, đơn luồng với nhiều tính linh hoạt.

Làm thế nào để JavaScript đạt được công việc xử lý không đồng bộ?

JavaScript có thể hoạt động với mã không đồng bộ cũng như mã đồng bộ. Tính năng độc đáo của thời gian chạy JavaScript là mặc dù trình thông dịch của JavaScript là một luồng, nhưng nó có thể thực thi nhiều mã cùng một lúc bằng cách sử dụng kiểu đồng thời theo cách không chặn. This enables asynchronous behavior.

Lập trình không đồng bộ hoạt động như thế nào trong JavaScript?

Làm cách nào để quản lý mã không đồng bộ trong JavaScript?

JavaScript có hỗ trợ lập trình không đồng bộ không?

Làm thế nào để JavaScript đạt được công việc xử lý không đồng bộ?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề