Xử lí bất đồng bộ js

ngày 14-10-2021

Với một người mới làm việc với js, có lẽ điều khiến ta cảm thấy khó chiệu nhất là xử lí bất đồng bộ, nhiều lúc đoạn code mình đọc cảm

thấy nó rất logic, rất đúng nhưng khi chạy thì không ra, console.log biến ra thì bị underfed.

Thật ra js khác với php một chỗ đó là nó là một ngôn ngữ bất đồng bộ, có nghĩa là có thể nó sẽ không chạy từ trên xuống dưới như logic thông 

thường mà có thể câu lên sau sẽ được thực thi trước câu lệnh dưới.

ví dụ câu lệnh dưới đây

<script> function test1(data, callback){ setTimeout( function(){ console.log("1"); }, 1000); } function test2(data){ console.log("2"); } test1(); test2(); </script>

theo như logic thông thường thì test1() được gọi trước test(2), thì kết quả sẽ là

1 2

Nhưng thực tế thì ở js, nó sẽ không đợi test1() chạy xong rồi mới chạy test(2), nó sẽ chạy trả ra kết quả

test2() trước, và đợi sau khi test1() chạy xong mới ra kết quả cho test 1

2 1

Điều này thường sẽ gấy khó chiệu mỗi khi bạn thực hiện tác vụ cần phải đợi kết quả, sau đó mới lấy kết quả đó đi xử lí tiếp

ví dụ như callapi, xử lí file....

Vậy nếu muốn nó chạy theo tuần tự, đợi hàm trước chạy xong, mới tới hàm sau thì phải làm như thế nào.

Chúng ta sẽ có 3 cách xử lí như sau

1. Sử dung Call Back

2. Dùng Promise

3. Dùng async- await

__________________________bài viết đang được cập nhật_________________________________