Video học lập trình mỗi ngày

Promise và async-await những khái niệm không còn xa lạ gì nữa đối với devjs hiện nay, bởi vì nó quá phổ biến và được sử dụng hằng ngày trong nodejs, reactjs... rất nhiều. Nhưng hầu hết, chúng ta để ý kỹ xem, nếu như dùng promise rồi thì sẽ không dùng async-await và ngược lại. Tại sao?

Nhưng trước tiên chúng ta phải biết promise là thuộc ES6, còn thằng-await là thuộc về ES8. Hai khái niệm khác nhau nhưng nó cùng một nhiệm vụ, nhưng giống như bài "Trời sinh ra var nhưng lại còn sinh ra let, const" thì chúng ta cũng phải nên đặt câu hỏi là: Tại sao có promise rồi lại sinh ra async-await làm gì?

Nhưng rất tiếc phải thông báo cho các bạn rằng, trong bài viết này chúng ta sẽ không đề cập đến chuyện khi nào nên sử dụng promise hay async-await vì trong blog lập trình javascript đã nói quá nhiều về sự hình thành của callback cho đến async-await. Nhưng chúng ta cũng nên lướt qua một phát để nhớ về thời trẻ trâu mà chúng ta đã khổ sở như thế nào cho tới khi async ra đời. Cùng xem lại vòng đời phát triển callbacks -> promise -> async-await

Callbacks javascript

Ta lấy một ví dụ sử dụng fetch luôn hêy, anh em nào chưa biết hay chưa sử dụng thì đọc bài này, cam đoan không master fetch không lấy tiền: Master fetch javascript

Hồi đó còn ngây dại:

fetch('https://api.github.com/users/anonystick')
.then(response => response.json())
.then(data => {
  //console.log(data);
  //function callback ở đây, hồi xưa khổ lắm
  callbackHere(data);
})
.catch(error => console.error(error));

function callbackHere(data){
	//có chết cũng xử lý trong này =]]
   console.log('Lấy về làm tiếp anh em ơi>>>',data)
}

Promise javascript

Sau đó tiếp cận được Promise thấy nó sướng gì đâu, kakaka,

Xem thêm: Performance tối ưu hơn khi sử dụng Promise trong trường hợp này?

const fetchPromise = fetch('https://api.github.com/users/anonystick');
console.log(fetchPromise);  // bản thân thằng này nó return về promise rồi 
fetchPromise.then(response => response.json())
.then(data => {
  console.log(data);
})

Async-await javascript

À nhân tiện đây để demo luôn về Top-level await javascript nhá. Một trong những tính năng mới của ES11 (ECMA 2020).

Sử dụng console trên chrome nha mấy chế

Có bạn nào tinh ý thắc mắc, của chỉ nhớ là await chỉ hoạt động khi có async khai báo với function. Câu hỏi hay đó và rất tinh ý, Đọc lại Top-level await javascript

Okay, vậy là rất nhanh và gọn chúng ta đi xong 3 phần callback - promise - async/await. Nhưng chúng ta đã đề cập ở trên, đây không phải là bài viết giới thiệu những tính năng đó, mà chúng ta muốn nếu kết hợp giữa promise và async thì cái kết sẽ ra sao, giờ chúng ta đi ví dụ xem

Kết hợp async/await với Promise.then

Chúng ta thử lấy ví dụ trên để phân tích tiếp

Nếu như việc sử dụng await trong trường hợp này sẽ mất thời gian với 3 line

const getUser = await fetch('https://api.github.com/users/anonystick')
const data = await getUser.json();
console.log(data);

Chúng ta thử kết hợp promise và async xem thế nào?

const getUser = await fetch('https://api.github.com/users/anonystick').then(data => data.json())
console.log(getUser)

wow, quá ngon luôn các chế ơi! gọn gàng và tường minh trong code đó là một trong những ưu tiên hàng đầu trong việc hình thành skills lập trình đấy. Tôi nghĩ bạn nên save vào nơi nào đó để sử dụng tính năng này. So cool :)

Đừng vội mừng, cuối bài tôi sẽ tips cho bạn một thủ thuật nữa ngắn gọn hơn nhiều, đó là phần thưởng cho những bạn nào chăm chỉ nhất. Ok đi tiếp ví dụ 2

Kết hợp async/await với Promise.catch

Nếu như việc sử dụng then trong promise thì catch cũng không kém phần long trọng, cho những ai đã từng

try {
  const data = await fetchData();
} catch (error) {
  console.error(error);
}

// Oh no, `data` is undefined 😱
console.log(data);

Vì sao `data` is undefined, lại gợi ý nữa hãy đọc lại bài viết này : "3 loại scope trong javascript với let, const trong javascript"

Thay thế const, sử dụng let

let data;

try {
  data = await fetchData();
} catch (error) {
  console.error(error);
}

// Now we can use `data` 😎
console.log(data);

OK bây giờ nó đã hoạt động, nhưng bạn có thấy nó ngứa mắt không??? Dài dòng lê thê, phức tạp. Do đó hãy xem chúng ta có thể kết hợp async/await với Promise.catch được không:

const data = await fetchData()
  .catch(error => {
    console.error(error);
    return null;
  });

// We can still use `data` 👍
console.log(data);

Ngon vl ra, thấy không? Học là phải vậy, tìm hiểu trên mạng, đọc sách... Sẽ thấy nhiều cái thú vị hơn nữa. MUốn học ở đâu ư? Đây tôi gợi ý tiếp "Master javascript from 0 to here" Bạn sướng không, chỉ trong một bài viết mà tôi có thể gợi ý cho các bạn nhiều bài viết và khái niệm đến vậy. Vậy mà không share nó ra cộng động, còn giúp được nhiều người nữa chứ. Share đi kakakak.

Async/await Có thể làm tốt hơn nữa.

Đây chính là phần thưởng dành cho các bạn đã chăm chú theo dõi, dưới đây tôi sẽ làm gọn hơn nữa với code ở trên kia

Code trên kia khi kết hợp async-await với promise.then()

const getUser = await fetch('https://api.github.com/users/anonystick').then(data => data.json())
console.log(getUser)

Viết lại chỉ sử dụng await

const getUser = await (await fetch('https://api.github.com/users/anonystick')).json();
console.log(getUser)

wow ngon dữ, thấy chưa? Anh em thấy chưa? Chúng ta không hề giỏi, chúng ta đề ngang nhau, chỉ khác nhau là về khía cạnh tìm hiểu và học hỏi thêm. Hết!

Thanks for reading!!

ref: Nguồn cảm hứng từ https://sunnysingh.io/