Cách sử dụng Async Await Fetch Axios trong lập trình JavaScript

1. Giới thiệu về Async/Await

Async/await là một cú pháp của JavaScript giúp xử lý các hàm bất đồng bộ một cách tuần tự và dễ đọc hơn. Khi sử dụng async/await, chúng ta có thể viết code như là sử dụng các hàm đồng bộ thông thường, mặc dù thực tế chúng thực hiện các tác vụ bất đồng bộ.

Lợi ích của Async/Await

• Code dễ đọc: Với async/await, chúng ta có thể viết code theo cách tưởng tượng và tuần tự như khi thực hiện các tác vụ đồng bộ.
• Xử lý ngoại lệ dễ dàng: Chúng ta có thể sử dụng khối try-catch để xử lý các ngoại lệ trong hàm async.
• Đồng bộ hóa các tác vụ bất đồng bộ: Chúng ta có thể chờ đợi kết quả trả về từ các hàm bất đồng bộ trước khi tiếp tục thực hiện code.

2. Fetch và Axios

Fetch và Axios là hai thư viện phổ biến được sử dụng để gửi yêu cầu HTTP từ JavaScript. Dưới đây là mô tả về cách chúng hoạt động.

Fetch

Fetch là một API được tích hợp sẵn trong các trình duyệt hiện đại, cho phép chúng ta gửi yêu cầu HTTP và nhận lại dữ liệu từ máy chủ. Nó hỗ trợ Promises, giúp xử lý các tác vụ bất đồng bộ một cách dễ dàng.

fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.log(error));

Axios

Axios là một thư viện HTTP mạnh mẽ và dễ sử dụng. Nó cung cấp một API đơn giản và rõ ràng để gửi các yêu cầu HTTP và xử lý các phản hồi. Axios cũng hỗ trợ Promises và cho phép chúng ta thực hiện các tác vụ bất đồng bộ một cách dễ dàng.

axios.get(url)
  .then(response => console.log(response.data))
  .catch(error => console.log(error));

3. Cách sử dụng Async/Await với Fetch và Axios

I) Tìm hiểu về try catch là gì?

Trong JavaScript, try/catch là một cấu trúc điều khiển được sử dụng để xử lý các ngoại lệ (exceptions) mà có thể xảy ra trong quá trình thực thi mã.

try {
  // code...
} catch (err) {
  // xủ lý lỗi
}

Cách hoạt động của try-catch như sau:

1. Đầu tiên, đoạn mã trong try {...} được thực thi.
2. Nếu không có lỗi thì catch (err) bị bỏ qua, việc thực thi đến cuối try và tiếp tục, bỏ qua catch.
3. Nếu có lỗi xảy ra thì quá trình thực thi try bị dừng và chương trình chuyển đến đầu catch (err). Trong đó, biến err (bạn có thể sử dụng bất kỳ tên nào tùy thích) sẽ chứa một đối tượng lỗi với thông tin chi tiết về lỗi đã xảy ra.

Sử dụng try catch để code của bạn nếu xảy ra lỗi thì vẫn chạy đồng bộ từ trên xuống nhé và trường hợp hay sử dụng:

• Khi bạn gọi các hàm hoặc phương thức mà có thể ném (throw) ngoại lệ: Nếu một hàm hoặc phương thức có thể ném ngoại lệ, bạn nên đặt nó trong khối try và xử lý ngoại lệ trong khối catch. Điều này đặc biệt quan trọng khi bạn đang làm việc với các API bên ngoài hoặc thư viện mà bạn không kiểm soát.
• Khi bạn thực hiện các thao tác có thể gây ra lỗi: Điều này bao gồm các thao tác như truy cập vào các phần tử của mảng hoặc đối tượng mà có thể không tồn tại, đọc hoặc ghi dữ liệu từ tập tin, thao tác với cơ sở dữ liệu, và cả thực hiện các phép toán mà có thể không hợp lệ (như chia cho 0).
• Khi bạn muốn bảo vệ mã của mình khỏi các lỗi không mong muốn: Dùng try/catch có thể giúp bạn kiểm soát được lỗi xảy ra, từ đó bạn có thể thông báo cho người dùng một cách thân thiện hơn, hoặc ghi lại lỗi để phân tích sau này.

II) Để sử dụng async/await với fetch và axios, chúng ta cần thực hiện các bước sau:

Sử dụng Async/Await với Fetch

async function fetchData(url) {
  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

Sử dụng Async/Await với Axios

async function fetchData(url) {
  try {
    const response = await axios.get(url);
    console.log(response.data);
  } catch (error) {
    console.log(error);
  }
}

Khi sử dụng async/await với fetch và axios, chúng ta có thể gọi các hàm này như là các hàm đồng bộ thông thường:

fetchData('https://api.example.com/data');

4. Các FAQ (Câu hỏi thường gặp)

Q1: Async/await chỉ hoạt động trong JavaScript hiện đại, liệu nó có tương thích với tất cả các trình duyệt không?

A1: Async/await được hỗ trợ trong các trình duyệt hiện đại như Chrome, Firefox, Safari, và Edge. Tuy nhiên, các trình duyệt cũ hơn có thể không hỗ trợ hoàn toàn.

Q2: Tại sao nên sử dụng fetch hoặc axios thay vì XMLHttpRequest?

A2: Fetch và axios cung cấp một API đơn giản và dễ sử dụng hơn so với XMLHttpRequest. Chúng cũng hỗ trợ Promises, giúp xử lý các tác vụ bất đồng bộ một cách linh hoạt và rõ ràng.

Q3: Sự khác biệt giữa fetch và axios là gì?

A3: Fetch là một API được tích hợp sẵn trong các trình duyệt hiện đại, trong khi axios là một thư viện bên thứ ba. Axios cung cấp một API đơn giản và dễ sử dụng hơn, cũng như hỗ trợ xử lý lỗi và ghi lại yêu cầu.

Q4: Tôi có thể sử dụng async/await với các yêu cầu POST hay PUT không?

A4: Có, bạn có thể sử dụng async/await để xử lý các yêu cầu POST, PUT hoặc bất kỳ phương thức HTTP nào khác. Điều quan trọng là đảm bảo rằng bạn đã hiểu cách sử dụng chúng và kiểm tra các tài liệu của fetch hoặc axios.

Q5: Async/await có thể được sử dụng để gọi nhiều yêu cầu bất đồng bộ cùng một lúc không?

A5: Có, bạn có thể sử dụng async/await để gọi nhiều yêu cầu bất đồng bộ cùng một lúc, và sau đó chờ đợi tất cả các yêu cầu hoàn thành trước khi tiếp tục thực hiện code.

5. Kết luận

Trên đây là một cái nhìn tổng quan về async/await, fetch, và axios trong lập trình JavaScript. Async/await giúp xử lý các tác vụ bất đồng bộ một cách tuần tự và dễ đọc hơn, trong khi fetch và axios là những công cụ mạnh mẽ để gửi yêu cầu HTTP từ JavaScript.

Với async/await, fetch, và axios, bạn có thể xây dựng các ứng dụng web tương tác với máy chủ một cách hiệu quả và linh hoạt. Hãy tiếp tục khám phá và áp dụng những kiến thức này vào dự án của bạn!