Lấy nội dung JSON từ API URL bằng JavaScript

Cách lấy nội dung JSON từ API URL bằng JavaScript. Bao gồm mã nguồn chi tiết và giải thích từng dòng để giúp bạn hiểu cách sử dụng Fetch API để thực hiện yêu cầu GET và xử lý dữ liệu JSON.

Dưới đây là đoạn mã JavaScript để lấy nội dung JSON từ API URL bằng phương thức GET:

// Định nghĩa hàm để lấy dữ liệu JSON từ API
async function fetchJsonData(url) {
    try {
        // Thực hiện yêu cầu GET đến URL
        const response = await fetch(url);
        
        // Kiểm tra xem yêu cầu có thành công không
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }

        // Chuyển đổi phản hồi từ API thành JSON
        const data = await response.json();

        // Trả về dữ liệu JSON
        return data;
    } catch (error) {
        // Xử lý lỗi nếu có
        console.error('There was a problem with the fetch operation:', error);
    }
}

// Ví dụ sử dụng hàm với URL của API
const apiUrl = 'https://api.example.com/data';
fetchJsonData(apiUrl).then(data => {
    console.log(data);
});

Giải Thích Chi Tiết Từng Dòng Code:

1. async function fetchJsonData(url) {

   • Định nghĩa một hàm bất đồng bộ fetchJsonData nhận một tham số url, dùng để lấy dữ liệu từ API.

2. try {

   • Bắt đầu khối try để xử lý các lỗi có thể xảy ra trong quá trình lấy dữ liệu.

3. const response = await fetch(url);

   • Sử dụng fetch để thực hiện yêu cầu GET đến URL và chờ đợi phản hồi từ API. Kết quả được lưu vào biến response.

4. if (!response.ok) {

   • Kiểm tra nếu phản hồi không thành công (trạng thái không phải 2xx).

5. throw new Error('Network response was not ok');

   • Nếu phản hồi không thành công, ném một lỗi với thông báo phù hợp.

6. const data = await response.json();

   • Chuyển đổi phản hồi từ API thành định dạng JSON và lưu vào biến data.

7. return data;

   • Trả về dữ liệu JSON đã được chuyển đổi.

8. } catch (error) {

   • Bắt đầu khối catch để xử lý các lỗi nếu có.

9. console.error('There was a problem with the fetch operation:', error);

   • In thông báo lỗi ra console nếu có vấn đề xảy ra trong quá trình lấy dữ liệu.

10. const apiUrl = 'https://api.example.com/data';

    • Định nghĩa URL của API mà bạn muốn lấy dữ liệu.

11. fetchJsonData(apiUrl).then(data => {

    • Gọi hàm fetchJsonData với URL của API và xử lý dữ liệu trả về bằng cách sử dụng .then.

12. console.log(data);

    • In dữ liệu JSON trả về từ API ra console.

Phiên bản JavaScript:

Đoạn mã trên tương thích với các trình duyệt hiện đại hỗ trợ ES8 (ECMAScript 2017) và các phiên bản mới hơn. Đảm bảo trình duyệt của bạn hỗ trợ async/await và fetch.