Nếu như phiên bản có Promise giải quyết được được phần nào callback hell, nhưng vẫn chưa max ping thì đến ES7 chúng ta có thể xử lý bất động bộ 1 cách dễ nhìn và dễ đọc hơn với async/await

Á à: Async/Await không thay thế promise nha mà nó kết hợp với promise để cho ra cú pháp dễ nhìn hơn. Vì thế để học async/await bạn phải nắm được promise trước đã nghenn

Async function: Luôn luôn return về 1 promise nha

async function handle() {
  return 1;
}

handle().then((value) => {
  console.log(value);
});

Await: Chỉ hoạt động bên trong async function, không thể await bên trong một function thường. Không phải cái gì cũng await, await chỉ nên dùng cho promise thôi nghenn

const getApi = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Hello");
    }, 3000);
  });
};

const handle = async () => {
  const value = await getApi();
  return value;
};

// Bình thường như này handle(); là okie rồi. Muốn lấy kết quả từ function async về thì .then() nữa nghenn
handle().then((value) => {
  console.log(value);
});

Xử lý lỗi với async/await

const getApi = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject("Loi roi");
    }, 3000);
  });
};
const getUser = async () => {
  try {
    const value = await getApi();
    console.log(value);
  } catch (error) {
    console.log(error);
    return null;
  }
};
getUser().then((value) => {
  console.log(value);
});

Gọi tuần tự với async/await

const getBooks = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(["book1", "book2", "book3"]);
    }, 3000);
  });
};
const getUser = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(["user1", "user2", "user3"]);
    }, 3000);
  });
};
const getAPI = async () => {
  const books = await getBooks();
  const users = await getUser();
  return { books, users };
};
getAPI().then((value) => {
  console.log(value);
});

Tối ưu performance với `Promise.all()

Ở đoạn code trên thay vì gọi lấy getBooks() xong rồi đến getUser() thì ra có thể cho function này chạy "cùng lúc"

const getAPI = async () => {
  const [books, users] = await Promise.all([getBooks(), getUser()]);

  return { books, users };
};
getAPI().then((value) => {
  console.log(value);
});