Это 17-й день моего участия в августовском испытании обновлений. Узнайте подробности события:Испытание августовского обновления
В стране есть талантливые люди, и они уже сотни лет лидируют.
предисловие
Вспоминая интервью, AJAX был в основном обязательным вопросом, таким как «асинхронный вызов, высокая производительность» и так далее. В то время AJAX был очень популярен, а AJAX во фронтенде не было.
Однако старая поговорка гласит: «Никто не годится сто дней, и ни один цветок не годится сто дней», а также говорится, что «в стране есть таланты из каждого поколения, каждое из которых прокладывает путь для сотни лет», для AJAX, разумеется, не исключение.
Нет, за последние два года мы явно можем обнаружить, что Fetch был обнаружен во многих новых фреймворках, а его простота использования и стабильность неоднократно проверялись.
Концепция Fetch
Fetch предоставляет общие определения для объектов Request и Response (и других сетевых запросов). Чтобы в будущем его можно было использовать в большем количестве сценариев приложений: будь то сервис-воркеры, Cache API или другие способы обработки запросов и ответов, или вообще любой способ, требующий от вас самостоятельно генерировать ответы в программе.
Он также предоставляет новое определение для связанных понятий, таких как собственные заголовки CORS и HTTP, заменяя их отдельные определения.
Для отправки запроса или получения ресурса необходимо использоватьWindowOrWorkerGlobalScope.fetch()метод. Он реализован во многих интерфейсах, в частности в интерфейсах Window и WorkerGlobalScope. Таким образом, впочти все средыТаким образом можно получить ресурсы.
совместимость
Самый простой способ узнать, станет ли новый API популярным, — это посмотреть на его совместимость, ведь если совместимость плохая, простому в использовании API будет сложно стать популярным.
Видно, что совместимость метода Fetch для браузеров, отличных от IE, не очень хорошая, что можно сказать является предпосылкой для пожара.
Отличие от АЯКС
Поскольку он используется для замены AJAX, должны быть какие-то преимущества, которых нет у AJAX, иначе зачем его заменять.
Подводя итог, разница заключается в следующем:
- Fetch использует обещания и не использует функции обратного вызова, поэтому он значительно упрощает метод написания и является более лаконичным.
- Fetch использует модульную структуру, а API разбросан по нескольким объектам (объект ответа, объект запроса, объект заголовков), что более разумно.Напротив, дизайн API XMLHttpRequest не очень хорош, а вход, статус все в том же интерфейсе управления, легко написать очень грязный код.
- Fetch обрабатывает данные через потоки данных (потоковые объекты), которые можно считывать блоками, что полезно для повышения производительности веб-сайта и сокращения использования памяти. Это весьма полезно для сценариев, когда запрашиваются большие файлы или скорость сети низкая. Объект XMLHTTPRequest не поддерживает потоки данных, все данные должны храниться в кеше, блочное чтение не поддерживается, необходимо дождаться получения всех данных, а затем выплюнуть их за один раз.
Fetch — это модно, по крайней мере, callback-функций можно писать меньше, а качество кода можно улучшить.
Как использовать выборку
fetch()Метод должен принимать один параметр — путь к ресурсу. Был ли запрос успешным или нет, он возвращаетPromiseОбъект, разрешение соответствует ответу на запрос. Основной синтаксис следующий:
fetch(url)
.then(...)
.catch(...)
Например:
fetch('https://bianchengsanmei.com/getInfo')
.then(response => response.json())
.then(json => console.log(json))
.catch(err => console.log('Request Failed', err));
В приведенном выше примереfetch()Полученный ответ — это объект Stream, а response.json() — это асинхронная операция, которая берет все содержимое и преобразует его в объект JSON.
Промисы можно переписать с использованием синтаксиса ожидания, чтобы сделать семантику более понятной:
async function getJSON() {
let url = 'https://bianchengsanmei.com/getInfo';
try {
let response = await fetch(url);
return await response.json();
} catch (error) {
console.log('Request Failed', error);
}
}
В приведенном выше примереawaitзаявление должно быть помещено вtry...catchвнутри, чтобы можно было отловить ошибки, которые могут возникнуть в асинхронных операциях.
Суммировать
Так называемые времена создают героев, из-за быстрого развития стандартов JavaScript AJAX на подъеме, но он вот-вот упадет, давайте подождем и посмотрим, как далеко может зайти Fetch.
Выше приведены некоторые сводки о Fetch, в основном из статей и руководств предшественников, я надеюсь принести вам некоторые выгоды!
~
~ Конец этой статьи, спасибо за чтение!
~
Получайте интересные знания, встречайте интересных друзей и формируйте интересные души!
Привет всем, я〖Программирование самадхи〗авторКороль-затворник, мой официальный аккаунт "Программирование самадхи』, пожалуйста, обратите внимание, я надеюсь, что вы можете дать мне больше советов!
Вы приходите, с ожиданиями, у меня есть аромат чернил, чтобы приветствовать вас! Вы возвращаетесь, что бы вы ни приобрели или ни потеряли, вы можете отдать это только с осадком!
Подчеркиваются как знания, так и навыки, культивируются внутренние и внешние навыки, должны быть усвоены как теория, так и практика, и обе руки должны быть твердыми!
Справочная документация: