Fetch đầu tiên của bạn

Xem thử: fetch – gọi món bằng code

Ở bài trước, bạn mở API trong trình duyệt bằng tay. Giờ JavaScript làm việc tương tự – với lệnh fetch:

const adresa = 'https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&current_weather=true';

const odpoved = await fetch(adresa);
const data = await odpoved.json();

console.log(data.current_weather.temperature);

Điều gì xảy ra, từng dòng:

fetch(adresa) – gửi request (người phục vụ đi vào bếp).
await – đợi phản hồi. Internet cần một chút thời gian!
odpoved.json() – chuyển response thành đối tượng JavaScript.
Rồi bạn làm việc với dữ liệu như đối tượng thường: chấm, chấm, xong.

⚠️

await chỉ hoạt động trong hàm có async, hoặc trong <script type="module">. Nếu trình duyệt báo lỗi “await is only valid in async functions”, bọc code như sau:

async function nacti() {
  // fetch and await go here
}
nacti();

In dữ liệu lên trang

Console dành cho lập trình viên – khách muốn thấy dữ liệu trên trang:

<p id="teplota">Loading…</p>

<script type="module">
  const odpoved = await fetch('https://api.open-meteo.com/v1/forecast?latitude=49.19&longitude=16.61&current_weather=true');
  const data = await odpoved.json();

  document.querySelector('#teplota').textContent =
    `Right now it's ${data.current_weather.temperature} °C`;
</script>

Quen thuộc từ Pháp sư (querySelector, textContent) cộng thêm fetch mới. Không gì hơn.

Đến lượt bạn 💪

Thêm đoạn <p id="teplota"> và script trên vào website.
Đổi tọa độ thành thành phố của bạn.
Thêm tốc độ gió vào hiển thị (data.current_weather.windspeed).
Bonus: khi nhiệt độ dưới 0, thêm ”🥶 Bundle up!” vào văn bản.

✅

Kiểm tra: Nhiệt độ thật hiện tại xuất hiện trên trang sau khi tải. Nếu tắt Wi-Fi và làm mới trang, vẫn hiện “Loading…” – chứng minh dữ liệu thật sự đến từ internet.

Những điều cần nhớ

fetch(adresa) gửi request, await đợi response.
.json() chuyển response thành đối tượng bạn đã biết cách xử lý.
Dữ liệu từ cả internet giờ chỉ cách một hàm.