fetch() içindeki ikinci parametre

Sınıfta işlevi kullanmaya çalıştığımızda fetch(), web sitesindeki API'den veri almak için kullanma eğilimindeyiz.

https://reqres.in/geliştiricilerin kodlarını test etmeleri için API'ler sağlayan bir web sitesidir. Geliştiriciler, farklı HTTP yöntemlerini test edebilir ve gerçek bir yanıt ancak sahte veriler alabilir (REQRES, 2023). Kodumuzu birden çok kez test etmek için bu web sitesini kullanacağız.

Örneğin, kullanıcının adını bilmek için sahte verileri alabiliriz.https://reqres.in/ile fetch().

Verileri almak için Test getirmeyi() düğmesini tıklarsanız , getirme, ' 'dan verileri almaya çalışır.https://reqres.in/api/users/2'GET yöntemi ile. Aşağıda “Janet” ifadesinin eklendiğini görebilirsiniz.

Ancak, getirme yalnızca verileri getirmek için kullanılamaz. Getirme işleviyle ne yapmak istediğinizi özelleştirmenizi sağlayan ikinci bir parametreye sahiptir.

İsteğe bağlıdır , bu yüzden tamamen göz ardı edebilirsiniz ve tıpkı daha önce yaptığımız gibi verileri almak için hala çalışıyor.

İkinci parametre bir nesne olmalıdır . Ve bu nesnenin içine, gövde, başlık, yöntem gibi birden çok alt parametre dahil edebilirsiniz (MDN, 2023).

Bir örnek var:

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  };

Peki nasıl kullanacağız?

Bu örnekte, kullanıcılar Gönderiyi Test Et düğmesini tıkladığında, uygulamamız kullanıcının adını ve işini sunucuya gönderir. Ve kullanıcılara oluşturma zamanını söylemek için aşağıda bir zaman damgası olacaktır.

.catch((hata) =>{})

Hepimizin bildiği gibi, fetch() işlevi a Promise Object. Ancak sunucu yanıt vermezse ve verilen söz yerine getirilmezse ne olur?

Bir hata olacak!

catch((error) => {})Bu yüzden çökmeyi önlemek için hatayı yakalamak için kullanmamız gerekiyor .

Örnek kodu görelim.

Bu örnekte, 'yanlışlıkla' yanlış bağlantıyı buldum. Yani söz yerine getirilmeyecek ve bir hata olacak. Bu nedenle, kullanıcılar Gönderiyi Test Et düğmesini tıklarsa, konsol "Hata!!!" yazdırır.

Response nesnesinin daha fazla kullanımı

Bir hata olduğunda durumu tartıştık ve Söz Verme Nesnesi yerine getirilmedi. Ancak, tarafından döndürülen söz nesnesi yerine getirilirse , bir Response nesnesifetch() döndürür .

Bazı örnek özellikleri vardır (MDN, 2023):

• Yanıt.tamam
• Yanıt.durum
• Response.statusText
• yanıt.url
• …

Response.statusHTTP durum kodunu döndüren ve bir boole değeriResponse.ok döndüren öğesini kullandım , getirmenin başarılı olup olmadığını görebiliriz.

Bu örnekte, kullanıcılar Gönderiyi Test Et düğmesini tıklarsa, başarılı olup olmadığını görmek için HTTP durum kodu ve bir boole değeri olacaktır.

Bir getirmeyi iptal etme

Kullanıcılar ayrıca AbortController Object.

Ayrı ayrı oluşturmamız gerekiyor AbortController Object.

let controller = new AbortController();

Yani yeni ikinci parametremiz:

const secondParameter = {
  method : 'POST',
  body : JSON.stringify({
    "name": "morpheus",
    "job": "leader"
   }),
  signal: controller.signal
  };

Abort() işlemini yapmak için bir aralık belirledim. Bu yüzden önce iptali tıkladığımda ve Test Gönderisi konsolda bir AbortError atacak. Ve HTTP durumu ve kodu, daha önce yaptığımız gibi Gönderiyi Test Et düğmesinin altında gösterilmeyecek.

Referans

MDN. (2023). Fetch() — web apis: MDN. Web API'leri | MDN. Erişim tarihi: 31 Mart 2023,https://developer.mozilla.org/en-US/docs/Web/API/fetch

GEREKSİNİMLER (2023). Ajax isteklerinize yanıt vermeye hazır, barındırılan bir rest-API. gerekli Erişim tarihi: 31 Mart 2023,https://reqres.in/

MDN. (2023). Yanıt — web apis: MDN. Web API'leri | MDN. Erişim tarihi: 31 Mart 2023,https://developer.mozilla.org/en-US/docs/Web/API/Response

MDN. (2023). Durdurma denetleyicisi — web apis: MDN. Web API'leri | MDN. Erişim tarihi: 31 Mart 2023,https://developer.mozilla.org/en-US/docs/Web/API/AbortController