Поиск…
Синтаксис
- prom = fetch (url). then (function (response) {})
- prom = fetch (url, options)
- обещание = выборка (запрос)
параметры
| Опции | подробности |
|---|---|
method | Метод HTTP для использования для запроса. ex: GET , POST , PUT , DELETE , HEAD . По умолчанию GET . |
headers | Объект Headers содержащий дополнительные заголовки HTTP для включения в запрос. |
body | Полезная нагрузка запроса может быть string или объектом FormData . По умолчанию undefined |
cache | Режим кеширования. default , reload , no-cache |
referrer | Ссылка на запрос. |
mode | cors , no-cors , same-origin . По умолчанию no-cors . |
credentials | omit , то same-origin , include . По умолчанию omit . |
redirect | follow , error , manual . По умолчанию следует follow . |
integrity | Связанные метаданные целостности. По умолчанию пустая строка. |
замечания
Стандарт Fetch определяет запросы, ответы и процесс, который их связывает: выборка.
Среди других интерфейсов стандарт определяет объекты Request и Response , предназначенные для всех операций, связанных с сетевыми запросами.
Полезным приложением этих интерфейсов является GlobalFetch , который можно использовать для загрузки удаленных ресурсов.
Для браузеров, которые еще не поддерживают стандарт Fetch, GitHub имеет доступный полиполк . Кроме того, существует также реализация Node.js, которая полезна для согласованности между сервером и клиентом.
В отсутствие отмененных обещаний вы не можете прервать запрос на выборку ( проблема github ). Но есть предложение T39 на первом этапе для отмененных обещаний.
GlobalFetch
Интерфейс GlobalFetch предоставляет функцию fetch , которая может использоваться для запроса ресурсов.
fetch('/path/to/resource.json')
.then(response => {
if (!response.ok()) {
throw new Error("Request failed!");
}
return response.json();
})
.then(json => {
console.log(json);
});
Разрешенное значение - это объект ответа . Этот объект содержит тело ответа, а также его статус и заголовки.
Установить заголовки запросов
fetch('/example.json', {
headers: new Headers({
'Accept': 'text/plain',
'X-Your-Custom-Header': 'example value'
})
});
Данные POST
Данные формы проводки
fetch(`/example/submit`, {
method: 'POST',
body: new FormData(document.getElementById('example-form'))
});
Проводка данных JSON
fetch(`/example/submit.json`, {
method: 'POST',
body: JSON.stringify({
email: document.getElementById('example-email').value,
comment: document.getElementById('example-comment').value
})
});
Отправить файлы cookie
Функция fetch не отправляет файлы cookie по умолчанию. Существует два способа отправки файлов cookie:
- Отправляйте файлы cookie только в том случае, если URL-адрес находится в том же месте, что и вызывающий скрипт.
fetch('/login', {
credentials: 'same-origin'
})
- Всегда отправляйте файлы cookie, даже для вызовов с перекрестным происхождением.
fetch('https://otherdomain.com/login', {
credentials: 'include'
})
Получение данных 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));
Использование Fetch для отображения вопросов из API переполнения стека
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'})`
}
});