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