Getir() işlevine giriş

Matt Gaunt

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

Tarayıcı Desteği

• . 42)
• . 14
• . 39
• . 10.1

Kaynak

Daha önce hiç Vaatler Daha önce JavaScript Vaatlerine Giriş başlıklı makaleye göz atın.

Temel Getirme İsteği

XMLHttpRequest ile uygulanmış bir örneği aşağıda bulabilirsiniz ve ardından fetch ile. URL istemek, yanıt almak ve URL'yi JSON olarak göstereceğim.

XMLHttpRequest

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

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

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

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

Getir

Getirme isteğimiz şöyle görünür:

fetch('./api/some.json')
  .then(
  function(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(function(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 öncelikle yanıt durumunun 200 olarak ayarlayıp yanıtı JSON olarak ayrıştırın. 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. Aşağıda, isteyebileceğiniz diğer meta verileri nasıl işleyeceğiniz açıklanmıştır Örneğin başlıklar:

fetch('users.json').then(function(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ıt bir basic türü için verilen yanıttan görüntüleyebileceğiniz öğeler kısıtlanmış durumda.

Başka bir kaynaktaki bir kaynak için istek yapılır ve bu kaynak geri dönerse COR başlıkları, 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ıt, CORS döndürmeyen farklı bir kaynaktan geliyor başlıklar. 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 öğelerin uygun COR başlıklarını döndürün.
• cors-with-forced-preflight, ön kontrol gerçekleştirir kontrol et göz önünde bulundurmanız gerekir.
• 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 ikinci parametre olarak bir options nesnesi ekleyin fetch isteğinde bulunun ve bu nesnedeki modu tanımlayın:

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

Zincirleme söz verme

Vaatlerin en güzel özelliklerinden biri, bunları bir araya getirme yeteneğidir. Örneğin, fetch(), getirme istekleri arasında mantığı paylaşmanıza olanak tanır.

Bir JSON API ile çalışıyorsanız durumu kontrol etmeniz ve Her yanıt için JSON dosyası. Durumu ve durumunu tanımlayarak kodunuzu basitleştirebilirsiniz: Vaatleri 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(function(data) {
    console.log('Request succeeded with JSON response', data);
    }).catch(function(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 Vaat reddedilir ve yakalama ifadesi yürütülür.

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

POST İsteği

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

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

Getirme isteğiyle kimlik bilgisi gönderme

Çerez gibi kimlik bilgileriyle bir getirme isteğinde bulunmak için isteğin "include" için credentials değeri:

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