Wprowadzenie do pobierania()

fetch() umożliwia wysyłanie żądań sieciowych podobnych do XMLHttpRequest (XHR). główną różnicą jest to, że interfejs Fetch API korzysta z funkcji Promises, która ma parametr prostszy interfejs API, który pomoże Ci uniknąć skomplikowanych wywołań zwrotnych Interfejs API XMLHttpRequest.

Obsługa przeglądarek

  • Chrome: 42.
  • Edge: 14.
  • Firefox: 39.
  • Safari: 10.1

Źródło

Jeśli nigdy nie korzystałeś(-aś) Obietnice , zapoznaj się z artykułem Introduction to JavaScript Promises (Wprowadzenie do obietnic JavaScriptu).

Podstawowe żądanie pobierania

Oto przykład zaimplementowanego parametru XMLHttpRequest a potem w aplikacji fetch. Chcemy poprosić o adres URL, uzyskać odpowiedź i przeprowadzić analizę. go w formacie JSON.

XMLHttpRequest

XMLHttpRequest potrzebuje 2 detektorów, aby obsłużyć sukces i błędów oraz połączenie z numerami open() i send(). Przykład z dokumentacji MDN.

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();

Pobierz

Nasze żądanie pobierania wygląda tak:

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);
  });

Żądanie fetch() wymaga tylko jednego wywołania, aby wykonać tę samą pracę co XHR przykład. Aby przetworzyć odpowiedź, najpierw sprawdzamy, czy jej stan to 200, a następnie przeanalizuj odpowiedź jako JSON. Odpowiedź na żądanie fetch() to Stream, co oznacza, że po nazywamy metodę json(), zwracana jest obietnica. Strumień danych odbywa się asynchronicznie.

Metadane odpowiedzi

W poprzednim przykładzie pokażemy stan Response (Odpowiedź). i prześle ją do formatu JSON. Postępowanie z innymi metadanymi, które mogą Ci się przydać takie jak nagłówki:

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);
});

Typy odpowiedzi

Gdy wykonujemy żądanie pobierania, odpowiedź otrzymuje response.type z „basic”, „cors” lub „opaque”. Te types pokazują, skąd pochodzi zasób, i można ich użyć do określić sposób postępowania z obiektem odpowiedzi.

Gdy przeglądarka wysyła żądanie zasobu w tym samym punkcie początkowym, odpowiedź zawiera tag Typ basic z ograniczeniami, które można wyświetlić z poziomu odpowiedzi.

Jeśli zostanie wysłane żądanie dotyczące zasobu z innego punktu początkowego, które zwróci ten punkt początkowy Nagłówki COR, typ to cors. cors są podobne do odpowiedzi basic, ale ograniczają nagłówki, może wyświetlać Cache-Control, Content-Language, Content-Type, Expires, Last-Modified i Pragma.

opaque odpowiedzi pochodzi z innego źródła, które nie zwraca CORS nagłówki. Jeśli odpowiedź będzie nieprzejrzysta, odczytywanych danych lub wyświetl stan żądania, co oznacza, że nie można czy żądanie zostało zrealizowane.

Możesz zdefiniować tryb żądania pobierania, tak aby tylko określone typy żądań rozwiązania problemu. Tryby, które możesz ustawić, to:

  • same-origin działa tylko w przypadku żądań zasobów z tego samego źródła, odrzuca wszystkie inne żądania.
  • cors umożliwia wysyłanie żądań zasobów z tego samego źródła i z innych źródeł, zwraca odpowiednie nagłówki COR.
  • cors-with-forced-preflight wykonuje proces wstępny sprawdź przed wysłaniem jakiejkolwiek prośby.
  • Funkcja no-cors służy do wysyłania żądań do innych źródeł, które nie mają CORS i doprowadzi do odpowiedzi opaque, ale jak wspomniano , nie jest to w zakresie globalnym okna.

Aby zdefiniować tryb, dodaj obiekt options jako drugi parametr w fetch i zdefiniuj tryb w tym obiekcie:

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)
    });

Łańcuch obietnic

Jedną z największych cech obietnic jest możliwość ich połączenia. Dla: fetch(), umożliwia współdzielenie logiki między żądaniami pobierania.

Jeśli korzystasz z interfejsu API JSON, musisz sprawdzić jego stan i przeanalizować JSON dla każdej odpowiedzi. Kod możesz uprościć, definiując stan Analiza składni JSON w oddzielnych funkcjach, które zwracają obietnice, i używają pobierania żądania obejmujące tylko dane ostateczne i przypadek błędu.

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);
    });

Ten przykład definiuje funkcję status, która sprawdza response.status i zwraca rozwiązaną obietnicę jako Promise.resolve(), lub odrzuconą obietnicę jako Promise.reject() Jest to pierwsza metoda wywoływana w łańcuchu fetch().

Jeśli obietnica zostanie zrealizowana, skrypt wywoła metodę json(), która zwraca drugą obietnicę z wywołania response.json() i tworzy który zawiera przeanalizowany kod JSON. Jeśli analiza się nie uda, obietnica ma wartość odrzucono i wykona się instrukcja „catch”.

Taka struktura umożliwia współdzielenie logiki pomiędzy wszystkimi żądaniami pobierania, dzięki czemu łatwiejszy w obsłudze, odczytywaniu i testowaniu.

Żądanie POST

Czasami aplikacja internetowa musi wywołać interfejs API za pomocą metody POST i dodać do w treści żądania. Aby to zrobić, ustaw parametry method i body w opcjach fetch():

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);
    });

Wysyłanie danych logowania za pomocą żądania pobierania

Aby wysłać żądanie pobierania za pomocą danych logowania, takich jak pliki cookie, ustaw parametr żądania Wartość credentials do "include":

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