Если вы постоянно следите за последними новостями в Интернете, вы слышали о новом 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

  1. Не перестает работать, если сервер отвечает с ошибкой 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. Когда он не занимается программированием, вы можете увидеть, как он потягивает эспрессо и читает статьи на среднем уровне.