Thực sự mình thấy vẫn mơ hồ về asynchronous (async-await) trong Javascript

Callback, Promise cũng như Async/Await đều là cơ chế bất đồng bộ (non-blocking) cả bạn ạ. Định nghĩa chi tiết ở trang chủ của mozilla

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

Mình thấy bạn đang hơi hiểu nhầm về đồng bộ và bất đồng bộ (blocking và non-blocking). Code đồng bộ ví dụ như Python hay C/C++ chẳng hạn, code sẽ chạy theo thứ tự từ trên xuống dưới, chờ dòng trên chạy xong mới đến dòng dưới. Như bạn get API chẳng hạn, nó sẽ chờ đến khi kết quả trả về thì mới thực thi tiếp đoạn code ở dưới. Còn Javascript với 3 cơ chế trên khi chạy những đoạn code bất đồng bộ (cần thời gian phản hồi như getAPI) thì sẽ ko đứng đó mà sẽ chạy tiếp các đoạn code ở dưới.

import React, { Component } from 'react';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null,
    };
  }
  componentDidMount() {
    fetch('https://api.mydomain.com')
      .then(response => response.json())
      .then(data => this.setState({ data }));

  console.log("1");
  }
}
export default App;

Như đoạn code trên, dòng console.log sẽ được chạy trước, đến khi có kết quả trả về từ API thì các đoạn code trong then mới được thực thi (gọi lại). Nói dễ hiểu hơn là khi có kết quả API, JS sẽ kêu "ê, tau có kết quả rồi nè, xử lý dữ liệu đi nhé."

Theo mình hiểu thì function gắn async sẽ chạy như non-blocking và nó trả về Promise. Và await thì phải nằm trong async để đảm bảo kết quả gọi tuần tự (cho trường hợp lấy dữ liệu trước dùng cho câu lệnh bất đồng bộ sau) nhưng bạn có thể kết hợp await với Promise.all để chạy không tuần tự nhưng kết quả trả về vẫn tường minh.

Nói chung tùy tình huống mà bạn sử dụng async/await, promise sao cho code nó tường minh

async function  foo() {
const a = await requestA();
const b = await requestB();
}
async function  foo() {
const queue = [];
queue.push(requestA());
queue.push(requestB());
const result = Promise.all(queue);
}
function foo() {
const result = [];
requestA()
  .then(a => result.push(a))
  .then(requestB)
  .then(b => result.push(b))
}

Không phải code mất nhiều time thì chạy bất đồng bộ, mà là có 2 trường hợp:

• truy cập môi trường bên ngoài, là những thứ không tồn tại trong process hiện tại, là những hàm native (được cung cấp sẵn) như http request, đọc file, truy cập db ...
• chủ động sử dụng những hàm để thực hiện bất đồng bộ, là những hàm nào trên Mozilla developer có nhé. Không phải lúc nào bất đồng bộ cũng nhanh hơn, nếu là tác vụ xử lý trên process hiện tại thì bất động bộ chỉ đơn giản là để sau rồi chạy, vẫn cần từng đó thời gian, trường hợp này có thể dùng worker.

Bài viết này sẽ giúp bạn hiểu rõ hơn bản chất của JS https://stackoverflow.com/questions/2035645/when-is-javascript-synchronous

Bạn hiểu JS luôn là bất đồng bộ -> cái này là sai

JS luôn đồng bộ và đơn luồng. Nó chỉ bất đồng bộ khi nào nó có thể làm điều đó.

tức là khi gặp một đoạn code xử lý mất nhiều time, Javascript sẽ không chờ đợi cho đến khi tác vụ đó hoàn thành mà tiếp tục chạy các câu lệnh phía dưới.

bạn hiểu nhầm cái này rồi, js nó là lập trình kịch bản, hành động , có khả năng hoạt động 1 cách độc lập (bất đồng bộ), tức là trong cùng 1 kịch bản thì nó vẫn hoạt động đồng bộ nhé.

cái thao tác gọi API bạn thấy nó không dừng lại chờ là do bản bạn sử dụng ajax , fetch hay axios nó làm sẵn cho bạn cái bất đồng bộ rồi.

1. Async/await cũng giống như promise, là non-blocking

Có lẽ là do câu chữ nên có thể làm bạn hơi khó hiểu. Mình nghĩ ý tác giả viết thế là vì một async function sẽ return một Promise nên khi các hàm khác dùng nó thì sẽ giống như là dùng Promise. Mình cho ví dụ:

const sayHello = async () => {
  console.log('Hello')
}

// Example 1:
console.log(sayHello())
> Promise

// Example 2:
sayHello().then(() => {
  console.log('Hi!')
})

Như vậy thì một async function sẽ chính là một Promise - tức nếu xét cả cái async function thì nó vẫn là một function bất đồng bộ. Tuy nhiên nội dung bên trong async function thì đúng như bạn đang nghĩ, qua từ khóa await, nó sẽ khiến cho code bên trong async function chạy từ trên xuống dưới như ý đồ bạn mong muốn. Tóm lại là chúng ta đang dùng bất đồng bộ để khử bất đồng bộ.

2. Async/await làm cho code bất đồng bộ nhìn và chạy gần giống như code đồng bộ.

Tác giả nói đúng đó bạn, bản chất thì cái code bên trong cái async function nó vẫn là code bất đồng bộ. Tuy nhiên cơ chế xử lý khác hơn một chút do trong ES6 có thêm một khái niệm gọi chung là Job Queue - một tầng phía trên của Event Loop Queue. Hiểu ngắn gọn thì trên ES6 implement thêm một cái Queue nữa để làm cho code trở nên chạy đồng bộ khi dùng async/await. Mình giải thích tới đây thôi bạn tìm hiểu thêm về Event Loop, Job Queue trên ES6 nhé.

@conglt bạn ơi, mình thấy vẫn còn băn khoăn. Bạn nói mặc định thì Javascrip là chạy đồng bộ . Vậy sao đoạn code này:

console.log("1");

setTimeout(function(){
    console.log("2");
}, 3000);

console.log("3");

Nếu đúng thế thì nó phải in ra lần lượt: 1, 2, 3 mới đúng chứ ?

Cám ơn các b: @kdg , @chungminhtu , @Plumpboy đã thêm comment cho bài viết của m. Mình sẽ tìm hiểu thêm nhé