CTN 11. Promise and Event loop

Hello! I'm Zu.Doan

Series này mình muốn rèn luyện khả năng suy nghĩ và giải bài tập, qua đó để hiểu rõ hơn các khái niệm của Javascript.

Bài 1

let promise = new Promise((rs, rj) => {
  setTimeout(() => rs(4), 0);
  // Nhớ lại kiến thức về Event loop, setTimeout là một hàm xử lý bất đồng bộ
  // do đó callback function của nó sẽ được đưa sang API xử lý và đẩy về callback queue để chờ được đẩy lên call stack
  // => trong trường hợp này nó sẽ được xử lý sau 2 lệnh ở dưới

  Promise.resolve(console.log(3)); // in ra giá trị "3" và in ra trước lệnh console.log(2)

  console.log(2); // in ra giá trị "2"
});

promise
  .then((rs) => { // rs = 4
    console.log(rs ? rs ** rs : rs); // = console.log(4**4) = 256
    return rs; // return 4
  })
  .then((rs) => console.log(rs == 256 ? rs : rs * rs)); // = console.log(4*4) = 16

Lời giải:

let promise = new Promise((rs, rj) => {
  setTimeout(() => rs(4), 0);
  // Nhớ lại kiến thức về Event loop, setTimeout là một hàm xử lý bất đồng bộ
  // do đó callback function của nó sẽ được đưa sang API xử lý và đẩy về callback queue để chờ được đẩy lên call stack
  // => trong trường hợp này nó sẽ được xử lý sau 2 lệnh ở dưới

  Promise.resolve(console.log(3)); // in ra giá trị "3" và in ra trước lệnh console.log(2)

  console.log(2); // in ra giá trị "2"
});

promise
  .then((rs) => { // rs = 4
    console.log(rs ? rs ** rs : rs); // = console.log(4**4) = 256
    return rs; // return 4
  })
  .then((rs) => console.log(rs == 256 ? rs : rs * rs)); // = console.log(4*4) = 16

Kiến thức liên quan:

• Event loop
• setTimeout

Bài 2

async function f() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 0);
  });

  setTimeout(() => console.log("world"), 0);

  console.log(await promise);

  console.log("hello");
}

f(setTimeout(() => console.log("kiora"), 0));

Lời giải:

async function f() {
  // Khai báo một Promise
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 0); // Tương tự giải thích như (P1)
  });

  setTimeout(() => console.log("world"), 0); // Tương tự giải thích như (P1)

  // Phần thú vị nằm ở đoạn này
  // Do sử dụng await ở đây => lệnh console.log("hello") ở dưới bị block lại cho đến khi promise trả về giá trị
  // Mà trong promise được khai báo ở trên, nội dung trong nó lại là một hàm setTimeout 
  // => các setTimeout được khai báo trước đó phải được run xong thì mới run đến "setTimeout - done!"
  // => in ra "kiora"
  // => in ra "done!"
  console.log(await promise);

  // Sau khi đợi promise trả về kết quả, thì sẽ thực thi console.log("hello")
  // Và cuối cùng là in ra "world", do console.log("world") nằm trong setTimeout
  console.log("hello");
}

f(setTimeout(() => console.log("kiora"), 0));
// (P1) Đầu tiên chương trình sẽ thực thi đoạn code setTimeout(() => console.log("kiora"), 0) nằm trong phần tham số đầu vào của hàm f()
// do sử dụng setTimeout => đoạn code này sẽ được đưa sang webApi để xử lý hàm setTimeout
// Sau đó callback của hàm setTimeout được đưa vào callback queue để chờ event loop đưa lên callstack để xử lý nội dung của callback đó

// Tiếp theo sẽ thực thi hàm f()


// Kết quả:
// kiora
// done!
// hello
// world

Kiến thức liên quan:

• Promise
• Hiểu về event loop

Bài 3

function name() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("New Zealand");
    }, 10);
  });
}

function fruit() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Kiwi");
    }, 20);
  });
}

(async function countryandfruit() {
  const getName = await name();
  const getFruit = await fruit();

  console.log(`Kiora: ${getName} ${getFruit}`);
})();

(async function fruitandcountry() {
  const [getName, getFruit] = await Promise.all([name(), fruit()]);

  console.log(`Hello: ${getName} ${getFruit}`);
})();

Lời giải:

function name() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("New Zealand");
    }, 10);
  });
}

function fruit() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("Kiwi");
    }, 20);
  });
}

(async function countryandfruit() {
  const getName = await name();
  const getFruit = await fruit();

  console.log(`Kiora: ${getName} ${getFruit}`);
})();

(async function fruitandcountry() {
  const [getName, getFruit] = await Promise.all([name(), fruit()]);

  console.log(`Hello: ${getName} ${getFruit}`);
})();

// In ra "Hello New Zealand Kiwi" trước
// In ra "Kiora New Zealand Kiwi" sau

// Bản chất là phân biệt được Promise.all là dùng để thực hiện đồng thời nhiều promise
// Ở đây ta chú ý tới tổng thời gian thực thi promise trước khi trả về kết quả thông qua console.log()
// fruitandcountry function có tổng thời gian chờ = 20 ms
// countryandfruit function có tổng thời gian chờ = 10 + 20 ms

Kiến thức liên quan:

• Promise.all