Szukaj…
Składnia
- promise = fetch (url) .then (function (response) {})
- obietnica = pobierz (adres URL, opcje)
- obietnica = pobierz (żądanie)
Parametry
| Opcje | Detale |
|---|---|
method | Metoda HTTP używana w żądaniu. np .: GET , POST , PUT , DELETE , HEAD . Domyślnie GET . |
headers | Obiekt Headers zawierający dodatkowe nagłówki HTTP do uwzględnienia w żądaniu. |
body | Ładunek żądania może być string lub obiektem FormData . Domyślnie jest undefined |
cache | Tryb buforowania. default , reload , no-cache |
referrer | Strona odsyłająca zapytania. |
mode | cors , no-cors , tego same-origin . Domyślnie no-cors . |
credentials | omit , to same-origin , include . Domyślnie omit . |
redirect | follow , error , manual . Domyślne do follow . |
integrity | Powiązane metadane dotyczące integralności. Domyślnie pusty ciąg. |
Uwagi
Standard Fetch definiuje żądania, odpowiedzi i proces, który je wiąże: pobieranie.
Wśród innych interfejsów, Standard definiuje Request i Response obiekty, przeznaczone do stosowania dla wszystkich operacji dotyczących żądania sieciowe.
Przydatnym zastosowaniem tych interfejsów jest GlobalFetch , którego można używać do ładowania zdalnych zasobów.
W przypadku przeglądarek, które nie obsługują jeszcze standardu Fetch, GitHub udostępnia polifill . Ponadto istnieje również implementacja Node.js, która jest przydatna dla spójności serwera / klienta.
W przypadku braku możliwych do anulowania obietnic nie można przerwać żądania pobierania ( problem z github ). Ale na etapie 1 jest propozycja T39 dotycząca obietnic, które można anulować.
GlobalFetch
Interfejs GlobalFetch udostępnia funkcję fetch , której można użyć do żądania zasobów.
fetch('/path/to/resource.json')
.then(response => {
if (!response.ok()) {
throw new Error("Request failed!");
}
return response.json();
})
.then(json => {
console.log(json);
});
Rozdzielona wartość jest obiektem odpowiedzi . Ten obiekt zawiera treść odpowiedzi, a także jej status i nagłówki.
Ustaw nagłówki żądań
fetch('/example.json', {
headers: new Headers({
'Accept': 'text/plain',
'X-Your-Custom-Header': 'example value'
})
});
Wysłać dane
Publikowanie danych formularza
fetch(`/example/submit`, {
method: 'POST',
body: new FormData(document.getElementById('example-form'))
});
Publikowanie danych JSON
fetch(`/example/submit.json`, {
method: 'POST',
body: JSON.stringify({
email: document.getElementById('example-email').value,
comment: document.getElementById('example-comment').value
})
});
Wyślij ciasteczka
Funkcja pobierania domyślnie nie wysyła plików cookie. Istnieją dwa sposoby wysyłania plików cookie:
- Pliki cookie wysyłaj tylko wtedy, gdy adres URL jest tego samego źródła co skrypt wywołujący.
fetch('/login', {
credentials: 'same-origin'
})
- Zawsze wysyłaj pliki cookie, nawet w przypadku połączeń z innego kraju.
fetch('https://otherdomain.com/login', {
credentials: 'include'
})
Pobieranie danych JSON
// get some data from stackoverflow
fetch("https://api.stackexchange.com/2.2/questions/featured?order=desc&sort=activity&site=stackoverflow")
.then(resp => resp.json())
.then(json => console.log(json))
.catch(err => console.log(err));
Korzystanie z funkcji pobierania do wyświetlania pytań z interfejsu API przepełnienia stosu
const url =
'http://api.stackexchange.com/2.2/questions?site=stackoverflow&tagged=javascript';
const questionList = document.createElement('ul');
document.body.appendChild(questionList);
const responseData = fetch(url).then(response => response.json());
responseData.then(({items, has_more, quota_max, quota_remaining}) => {
for (const {title, score, owner, link, answer_count} of items) {
const listItem = document.createElement('li');
questionList.appendChild(listItem);
const a = document.createElement('a');
listItem.appendChild(a);
a.href = link;
a.textContent = `[${score}] ${title} (by ${owner.display_name || 'somebody'})`
}
});
