Если вы постоянно следите за последними новостями в Интернете, вы слышали о новом API-интерфейсе выборки, который уже доступен в последних версиях браузеров, и задавались вопросом, что это такое? Если вы такой же любопытный, как я, вы, вероятно, уже догадались, а остальное можете пропустить. Для тех, кто ежедневно занимается средним питанием и все еще не знает, что это такое… продолжайте.
Fetch выглядит примерно так.
Получить, как цитирует MDN
Fetch - это современная концепция, эквивалентная XMLHttpRequest. Он предлагает многие из тех же функций, что и XMLHttpRequest, но более расширяемый и эффективный.
Fetch доступен для вашего оконного объекта в браузере и используется просто как
fetch(“url”, options) .then(response => response.json()) .then(data => console.log(data))
В строке 1 вы указываете URL-адрес и параметры. Параметр определяет такие вещи, как метод, тело, CORS, заголовки и т. Д. Вы можете пойти и прочитать полную спецификацию на MDN.
В строке 2 вы получаете полезную нагрузку, которая содержит ответ, но ответ отформатирован в соответствии с вашим типом содержимого. Поэтому вам нужно преобразовать его в ожидаемый тип, например JSON / text и т. Д., Следовательно, response.json () / response.text (). Что снова возвращает обещание.
Строка 3 - это результат работы API.
Видишь ли, это так просто.
Что мы использовали до загрузки? и почему именно сейчас?
Перед выборкой мы использовали API под названием XHR, который снова доступен в оконном объекте и основан на XMLHttpRequest. Раньше XML был способом передачи данных по умолчанию, в отличие от JSON, который появился довольно недавно, отсюда и название. Типичный вызов API XHR будет выглядеть так.
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
alert(xhr.responseText);
}
}
xhr.open('GET', 'http://example.com', true);
xhr.send(null);
Ну это как то громоздко !!! Поэтому многие библиотеки, такие как JQuery, Angular, React, Vue, сделали над ним оболочки, чтобы упростить процесс и обеспечить поддержку продвинутых API, таких как promises и async / await. Множество библиотек, таких как axios / request, обрезано для решения одной и той же проблемы, хотя и на разных платформах.
Столько кода для такой простой задачи, как вызов API !!!!
Вот тогда они (читайте хороших ребят из Chrome и Firefox) решают что-то изменить. Поддержка fetch API также доступна в сервис-воркерах, начиная с Chrome 40.
Основные возможности получения через XHR
- Не перестает работать, если сервер отвечает с ошибкой 400–500.
Теперь, если вы привыкли к традиционным запросам / аксиомам / запросам XHR, возможно, вам стоит подумать дважды, прежде чем писать код выборки. Рассмотрим этот пример
fetch(“https://httpstat.us/500") .then(function(response) { console.log(“success”) }). catch(function(error){ console.log(“error”); })
Такой традиционный программист, как я, споткнется об этом и скажет, что это вернет ошибку. Но вернет успех.
Почему?
Fetch считает это ошибкой запроса только в том случае, если это был сбой сетевого запроса, сбой DNS или ошибка, такая как вызов API на основе HTTP через HTTPS. И потому, что этот запрос дал нам 500 ответов, и с самим запросом проблем не было.
Но еще не все потеряно. Fetch дает вам кнопку ok, которая работает с statusText. Посмотрите пример ниже
fetch("http://httpstat.us/500")
.then(function(response) {
if (!response.ok) {
throw Error(response.statusText);
}
return response;
}).then(function(response) {
console.log("ok");
}).catch(function(error) {
console.log(error);
});
Вы можете сделать это более общим, обработав эту ошибку в глобальной функции и сделав ее более краткой в стрелочной функции. В конце концов, это стало бы…
function handleErrors(response) {
if (!response.ok) {
throw Error(response.statusText);
}
return response;
}
fetch("http://httpstat.us/500")
.then(handleErrors)
.then(response => console.log("ok") )
.catch(error => console.log(error) );
2. По умолчанию не отправляет и не принимает файлы cookie
3. Fetch - это гораздо больше, чем AJAX.
Вы можете получать данные из самых разных опций, таких как видео / большие тексты / изображения, в отличие от XHR, который был построен для XML и позже включил JSON. Fetch может легко передавать ответы в потоковом режиме, на самом деле вы можете написать для него декодеры и обрабатывать его по мере поступления. Например
fetch(‘beatles.jpg’) .then(response => response.blob()) .then(response => { objectURL = URL.createObjectURL(response); imageElement.src = objectURL; })
Хотя исключение составляет JSON, который необходимо сбросить, потому что парсеру нужно выяснить, что где заканчивается.
Проблемы
Одна из основных проблем, которые я обнаружил с fetch, заключалась в том, что если вы отправляете запрос API в виде POST в заголовке запроса, вы не можете видеть тело отправляемых данных JSON. Это может быть связано с тем, что данные отправляются в виде большого двоичного объекта. Вы можете отследить эту проблему здесь.
Для более вовлеченных пользователей вот ссылка на спецификацию fetch API. Https://fetch.spec.whatwg.org/
Писатель работает инженером-программистом в названной фирме потребительского кредитования. Rentomojo. Когда он не занимается программированием, вы можете увидеть, как он потягивает эспрессо и читает статьи на среднем уровне.