Getir() işlevine giriş

fetch(), XMLHttpRequest (XHR)'ye benzer ağ istekleri göndermenize olanak tanır. İlgili içeriği oluşturmak için kullanılan Temel fark, Getirme API'sinin bir karmaşık geri çağırmalardan kaçınmanıza yardımcı olacak, XMLHttpRequest API'si.

Daha önce Promises kullanmadıysanız JavaScript Promises'e Giriş başlıklı makaleyi inceleyin.

Temel Getirme İsteği

Aşağıda, XMLHttpRequest ile ve ardından fetch ile uygulanan bir örnek verilmiştir. URL istemek, yanıt almak ve URL'yi JSON olarak göstereceğim.

XMLHttpRequest

XMLHttpRequest, başarı ve hata durumlarını işlemek için iki dinleyiciye ve open() ile send() çağrısına ihtiyaç duyar. MDN dokümanlarından örnek.

function reqListener () {
  const data = JSON.parse(this.responseText);
  console.log(data);
}

function reqError (err) {
  console.log('Fetch Error :-S', err);
}

const oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();

Getir

Getirme isteğimiz şu şekilde görünür:

fetch('./api/some.json')
  .then(response => {
    if (response.status !== 200) {
      console.log(`Looks like there was a problem. Status Code: ${response.status}`);

      return;
    }

    // Examine the text in the response
    response.json().then(function(data) {
      console.log(data);
    });
  })
  .catch(err => {
    console.log('Fetch Error :-S', err);
  });

fetch() isteğinin, XHR ile aynı işi yapması için yalnızca bir çağrı olması gerekir örneğine bakalım. Yanıtı işlemek için önce yanıt durumunun 200 olup olmadığını kontrol eder, ardından yanıtı JSON olarak ayrıştırırız. fetch() isteğine verilen yanıt Akış nesnesi. Bu, json() yöntemini çağırdığımızda bir Promise döndürülür. Akış eşzamansız olarak gerçekleşir.

Yanıt Meta Verileri

Önceki örnekte, Yanıt nesnesi ve yanıtı JSON olarak ayrıştırır. Erişmek isteyebileceğiniz diğer meta verileri (ör. üstbilgi) nasıl işleyeceğiniz aşağıda açıklanmıştır:

fetch('users.json').then(response => {
  console.log(response.headers.get('Content-Type'));
  console.log(response.headers.get('Date'));

  console.log(response.status);
  console.log(response.statusText);
  console.log(response.type);
  console.log(response.url);
});

Yanıt Türleri

Getirme isteği yaptığımızda yanıta response.type verilir "basic", "cors" veya "opaque". Bu types, kaynağın nereden geldiğini gösterir ve şu amaçlarla kullanabilirsiniz: yanıt nesnesinin nasıl ele alınacağını belirler.

Tarayıcı aynı kaynakta bir kaynak istediğinde, yanıtta, yanıttan görüntüleyebileceğiniz öğelerle ilgili kısıtlamalar içeren bir basic türü bulunur.

Başka bir kaynaktaki bir kaynak için istek yapılırsa ve bu kaynak CORs üst bilgilerini döndürürse tür cors olur. cors. yanıtlar basic yanıtlara benzer, ancak bunları yalnızca Cache-Control, Content-Language, Content-Type, Expires, Last-Modified ve Pragma.

opaque yanıtları, CORS üstbilgileri döndürmeyen farklı bir kaynaktan geliyor. Opak bir yanıtta, döndürülen verileri okuması veya isteğin durumunu görüntülemesi (yani bu durumu kontrol edemezsiniz) olup olmadığını kontrol edin.

Getirme isteği için bir mod tanımlayabilirsiniz. Böylece yalnızca belirli istek türleri çözer. Ayarlayabileceğiniz modlar şunlardır:

• same-origin yalnızca aynı kaynaktaki öğe istekleri için başarılı olur ve diğer tüm istekleri reddeder.
• cors, aynı kaynak ve diğer kaynaklardaki öğe isteklerine izin verir: uygun COR başlıklarını döndürün.
• cors-with-forced-preflight, herhangi bir istek yapmadan önce ön uç kontrol gerçekleştirir.
• no-cors, CORS'si olmayan diğer kaynaklara istekte bulunmak için kullanılır ve opaque yanıtıyla sonuçlanır, ancak belirtildiği gibi bu olanak tanıyor.

Modu tanımlamak için fetch isteğinde ikinci parametre olarak bir seçenekler nesnesi ekleyin ve modu bu nesnede tanımlayın:

fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
  .then(response => response.text())
  .then(text => {
    console.log('Request successful', text);
  })
  .catch(error => {
    log('Request failed', error)
  });

Söz zincirleme

Promise'lerin en iyi özelliklerinden biri, bunları birbirine zincirleme olarak bağlayabilmenizdir. Örneğin, fetch(), getirme istekleri arasında mantığı paylaşmanıza olanak tanır.

JSON API ile çalışıyorsanız her yanıt için durumu kontrol etmeniz ve JSON'u ayrıştırmanız gerekir. Durumu ve durumunu tanımlayarak kodunuzu basitleştirebilirsiniz: Vaatler döndüren ayrı işlevlerde JSON ayrıştırma ve getirme yöntemini kullanan yalnızca nihai verileri ve hata durumunu işleme isteğinde bulunabilir.

function status (response) {
  if (response.status >= 200 && response.status < 300) {
    return Promise.resolve(response)
  } else {
    return Promise.reject(new Error(response.statusText))
  }
}

function json (response) {
  return response.json()
}

fetch('users.json')
  .then(status)
  .then(json)
  .then(data => {
    console.log('Request succeeded with JSON response', data);
  }).catch(error => {
    console.log('Request failed', error);
  });

Bu örnekte response.status vestatus ya da tanımlanmış bir Promise’ı Promise.resolve(), ya da reddedilen bir Vaat Promise.reject(). Bu, fetch() zincirinde çağrılan ilk yöntemdir.

Promise sorunu çözülürse komut dosyası json() yöntemini çağırır. Bu yöntem response.json() çağrısından ikinci bir Promise değeri döndürür ve ayrıştırılan JSON'ı içeren nesne. Ayrıştırma başarısız olursa Promise reddedilir ve catch ifadesi yürütülür.

Bu yapı, mantığı tüm getirme isteklerinizde paylaşmanıza olanak tanır. Böylece kodun bakımı, okunması ve test edilmesi kolaylaşır.

POST isteği

Bazen bir web uygulamasının POST yöntemi olan bir API'yi çağırması ve parametrelerinden birini kullanmayın. Bunu yapmak için fetch() seçeneklerinde method ve body parametrelerini ayarlayın:

fetch(url, {
    method: 'post',
    headers: {
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
    },
    body: 'foo=bar&lorem=ipsum'
  })
  .then(json)
  .then(data => {
    console.log('Request succeeded with JSON response', data);
  })
  .catch(error => {
    console.log('Request failed', error);
  });

Getirme isteğiyle kimlik bilgisi gönderme

Çerezler gibi kimlik bilgileriyle getirme isteği göndermek için isteğin credentials değerini "include" olarak ayarlayın:

fetch(url, {
  credentials: 'include'
})