Bu makalede, Getirme API'si ile çalışırken bazı hata işleme yaklaşımları gösterilmektedir. Fetch API, uzak bir ağ kaynağına istek göndermenize olanak tanır. Uzak ağ çağrısı yaptığınızda web sayfanız çeşitli olası ağ hatalarına maruz kalır.
Aşağıdaki bölümlerde olası hatalar ve hatalar ile beklenmedik ağ koşullarına karşı dayanıklı, makul düzeyde işlevsellik sağlayan kodların nasıl yazılacağı açıklanmaktadır. Esnek kod, kullanıcılarınızın memnuniyetini sağlar ve web siteniz için standart bir hizmet düzeyi sunar.
Olası ağ hatalarını öngörme
Bu bölümde, kullanıcının "My Travels.mp4"
adlı yeni bir video oluşturduğu ve ardından videoyu bir video paylaşım web sitesine yüklemeye çalıştığı bir senaryo açıklanmaktadır.
Fetch ile çalışırken kullanıcının videoyu başarıyla yüklediği başarılı yolu dikkate almak kolaydır. Ancak, bu kadar sorunsuz olmayan ancak web geliştiricilerin planlaması gereken başka yollar da vardır. Bu tür (istenmeyen) yollar, kullanıcı hatası, beklenmedik çevre koşulları veya video paylaşım web sitesindeki bir hata nedeniyle oluşabilir.
Kullanıcı hatalarına örnekler
- Kullanıcı, video dosyası yerine resim dosyası (JPEG gibi) yükler.
- Kullanıcı yanlış video dosyasını yüklemeye başlar. Ardından, yükleme işleminin ortasında kullanıcı yüklenecek doğru video dosyasını belirtir.
- Kullanıcı, video yüklenirken yanlışlıkla "Yüklemeyi iptal et"i tıklar.
Çevre değişikliklerine örnekler
- Video yüklenirken internet bağlantısı çevrimdışı olur.
- Video yüklenirken tarayıcı yeniden başlatılır.
- Video paylaşım web sitesinin sunucuları, video yüklenirken yeniden başlatılır.
Video paylaşımı web sitesiyle ilgili hata örnekleri
- Video paylaşım web sitesi, boşluk içeren dosya adlarını işleyemez.
"My Travels.mp4"
yerine"My_Travels.mp4"
veya"MyTravels.mp4"
gibi bir ad beklenir. - Video paylaşım web sitesi, kabul edilen maksimum dosya boyutunu aşan bir video yükleyemiyor.
- Video paylaşım web sitesi, yüklenen videodaki video codec'ini desteklemiyor.
Bu örnekler gerçek hayatta yaşanabilir ve yaşanmaktadır. Geçmişte bu tür örneklerle karşılaşmış olabilirsiniz. Önceki kategorilerin her birinden bir örnek seçip aşağıdaki noktaları tartışalım:
- Video paylaşım hizmeti, verilen örneği işleyemezse varsayılan davranış nedir?
- Kullanıcı, örnekte ne olmasını bekler?
- Süreci nasıl iyileştirebiliriz?
Fetch API ile hataları işleme
Aşağıdaki kod örneklerinde, bu özellik kodunuzu basitleştirebileceği için üst düzey await
(tarayıcı desteği) kullanıldığını unutmayın.
Fetch API hataları oluşturduğunda
Bu örnekte, try
bloğunda oluşturulan hataları yakalamak için bir try
/catch
blok ifadesi kullanılmaktadır. Örneğin, Fetch API belirtilen kaynağı getiremezse bir hata atılır. Bu tür bir catch
bloğunda anlamlı bir kullanıcı deneyimi sunmaya özen gösterin. Kullanıcıya bir tür ilerlemeyi temsil eden yaygın bir kullanıcı arayüzü olan bir döndürme çubuğu gösteriliyorsa catch
bloğunda aşağıdaki işlemleri yapabilirsiniz:
- Dönen çubuğu sayfadan kaldırın.
- Ne tür bir sorunla karşılaşıldığını ve kullanıcının hangi seçenekleri kullanabileceğini açıklayan yararlı mesajlar gösterin.
- Kullanılabilir seçeneklere göre kullanıcıya "Tekrar dene" düğmesi gösterin.
- Arka planda, hatanın ayrıntılarını hata izleme hizmetinize veya arka uca gönderin. Bu işlem, hatayı daha sonra teşhis edilebilmesi için günlüğe kaydeder.
try {
const response = await fetch('https://website');
} catch (error) {
// TypeError: Failed to fetch
console.log('There was an error', error);
}
Daha sonraki bir aşamada, günlüğe kaydettiğiniz hatayı teşhis ederken kullanıcılarınız bir sorun olduğunu fark etmeden önce bu tür bir hatayı yakalamak için bir test senaryosu yazabilirsiniz. Hataya bağlı olarak test bir birim, entegrasyon veya kabul testi olabilir.
Ağ durumu kodu bir hatayı temsil ettiğinde
Bu kod örneği, her zaman 429 Too Many Requests
HTTP durum koduyla yanıt veren bir HTTP test hizmetine istek gönderir. Yanıtın catch
bloğuna ulaşmaması ilginçtir. Diğer bazı durum kodları arasında yer alan 404 durumu, ağ hatası döndürmez, bunun yerine normal şekilde çözülür.
HTTP durum kodunun başarılı olup olmadığını kontrol etmek için aşağıdaki seçeneklerden birini kullanabilirsiniz:
- Durum kodunun
200
ile299
arasındaki aralıkta olup olmadığını belirlemek içinResponse.ok
mülkünü kullanın. - Yanıtın başarılı olup olmadığını belirlemek için
Response.status
özelliğini kullanın. - Yanıtın başarılı olup olmadığını değerlendirmek için
Response.headers
gibi diğer meta verileri kullanın.
let response;
try {
response = await fetch('https://httpbin.org/status/429');
} catch (error) {
console.log('There was an error', error);
}
// Uses the 'optional chaining' operator
if (response?.ok) {
console.log('Use the response here!');
} else {
console.log(`HTTP Response Code: ${response?.status}`)
}
Olası HTTP yanıt durum kodlarını anlamak için kuruluşunuzdaki ve ekibinizdeki kişilerle birlikte çalışmanız önerilir. Arka uç geliştiriciler, geliştirici işlemleri ve servis mühendisleri bazen beklemediğiniz olası uç durumlar hakkında benzersiz bilgiler sağlayabilir.
Ağ yanıtı ayrıştırılırken hata oluştuğunda
Bu kod örneğinde, yanıt gövdesinin ayrıştırılmasıyla ortaya çıkabilecek başka bir hata türü gösterilmektedir. Response
arayüzü, metin veya JSON gibi farklı veri türlerini ayrıştırmak için kullanışlı yöntemler sunar. Aşağıdaki kodda, yanıt gövdesi olarak HTML dizesi döndüren bir HTTP test hizmetine ağ isteği gönderilir. Ancak yanıt gövdesi JSON olarak ayrıştırılmaya çalışıldığında hata oluşur.
let json;
try {
const response = await fetch('https://httpbin.org/html');
json = await response.json();
} catch (error) {
if (error instanceof SyntaxError) {
// Unexpected token < in JSON
console.log('There was a SyntaxError', error);
} else {
console.log('There was an error', error);
}
}
if (json) {
console.log('Use the JSON here!', json);
}
Kodunuzu çeşitli yanıt biçimlerini alacak şekilde hazırlamanız ve beklenmedik bir yanıtın kullanıcının web sayfasını bozmadığından emin olmanız gerekir.
Aşağıdaki senaryoyu düşünün: Geçerli bir JSON yanıtı döndüren ve Response.json()
yöntemiyle başarıyla ayrıştırılan uzak bir kaynağınız var. Hizmetin devre dışı kalması mümkündür. Kapatıldıktan sonra 500 Internal Server Error
döndürülür. JSON ayrıştırılırken uygun hata işleme teknikleri kullanılmazsa, ele alınmayan bir hata nedeniyle sayfa kullanıcı için bozulabilir.
Ağ isteği tamamlanmadan önce iptal edilmesi gerektiğinde
Bu kod örneğinde, devam eden bir isteği iptal etmek için AbortController
kullanılmaktadır. İletim aşamasında istek, başlatılmış ancak tamamlanmamış bir ağ isteğidir.
Devam eden bir isteği iptal etmeniz gerekebilecek senaryolar değişiklik gösterebilir ancak sonuçta kullanım alanınıza ve ortamınıza bağlıdır. Aşağıdaki kodda, Fetch API'ye bir AbortSignal
öğesinin nasıl iletileceği gösterilmektedir. AbortSignal
, bir AbortController
'a eklenir ve AbortController
, tarayıcıya ağ isteğinin iptal edilmesi gerektiğini belirten bir abort()
yöntemi içerir.
const controller = new AbortController();
const signal = controller.signal;
// Cancel the fetch request in 500ms
setTimeout(() => controller.abort(), 500);
try {
const url = 'https://httpbin.org/delay/1';
const response = await fetch(url, { signal });
console.log(response);
} catch (error) {
// DOMException: The user aborted a request.
console.log('Error: ', error)
}
Sonuç
Hataları ele almanın önemli bir yönü, hataya yol açabilecek çeşitli bölümleri tanımlamaktır. Her senaryo için kullanıcıya uygun bir yedek planınız olduğundan emin olun. Getirme isteğiyle ilgili olarak kendinize şu tür sorular sorun:
- Hedef sunucu devre dışı kalırsa ne olur?
- Fetch beklenmedik bir yanıt alırsa ne olur?
- Kullanıcının internet bağlantısı kesilirse ne olur?
Web sayfanızın karmaşıklığına bağlı olarak, farklı senaryolardaki işlevleri ve kullanıcı arayüzünü açıklayan bir akış şeması da çizebilirsiniz.