Fetch ile veri çekme

fetch ve async/await ile bir hava durumu API'sinden veri çekersin.

async işlev ve fetch

Bir sunucudan veri çekerken fetch bir Promise döndürür. await anahtar kelimesi ile bu promise'ın sonucunu bekleriz. await yalnızca async olarak işaretlenmiş işlevlerde kullanılır. async function fetchWeather(city) şeklinde bir işlev tanımlarız. İçinde await fetch(url) ile isteği gönderir, await response.text() ile gövdeyi metin olarak okur ve sonucu döndürürüz. Her await bir adımı bekler.

İki adımlı bekleme

Bir fetch isteğinde genellikle iki kez await kullanırsın. İlk await isteğin tamamlanmasını bekler ve sana bir Response nesnesi verir. İkinci await gövdenin okunmasını bekler. const response = await fetch(url) ile yanıtı alırsın; const info = await response.text() ile gövdeyi metin olarak okursun. İki adımı ayrı tutmak esneklik verir: önce durumu kontrol edip sonra gövdeyi işleyebilirsin.

Uygulama async fetchWeather işlevini tanımla

Önceki dersin çözümünün üzerine devam et. Bir async function fetchWeather(city) tanımla. İçinde url değişkenine `https://api.example.com/weather?city=${city}` şablon dizisini ata. const response = await fetch(url) ile yanıtı al, const info = await response.text() ile gövdeyi oku ve return info ile döndür.

Örnek çözümü göster

const app = document.querySelector("#app");
const cityInput = document.querySelector("#cityInput");
const getWeatherButton = document.querySelector("#getWeatherButton");
const weatherResult = document.querySelector("#weatherResult");
console.log(app, cityInput, getWeatherButton, weatherResult);

function getWeather() {
  const city = cityInput.value;
  console.log(city);
}

getWeatherButton.addEventListener("click", getWeather);

async function fetchWeather(city) {
  const url = `https://api.example.com/weather?city=${city}`;
  const response = await fetch(url);
  const info = await response.text();
  return info;
}

Kendini test et

await response.text() sana ne verir?
```
const info = await response.text();
```
- Bir Response nesnesi
- Gövdeyi metin olarak
- Bir durum kodu
- Bir Promise nesnesi
Cevabı göster

Gövdeyi metin olarak — Doğru! await gövdeyi metin olarak verir.

fetch isteğini bekle

const response = ____;

Cevabı göster

const response = await fetch(url);

fetch adımlarını eşleştir

fetch(url)

İsteği gönderir
await

Sonucu bekler
response.text()

Gövdeyi okur
return

Değeri döndürür
fetchWeather adımlarını eşleştir

async function

İşlevi tanımlar
await fetch

İsteği bekler
await response.text()

Gövdeyi bekler
return info

Sonucu verir

Sıradaki ders: Veriyi DOM'a basma

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler