Fetch или ajax что лучше
Русские Блоги
Методы запроса данных HTTP: fetch и ajax (XMLHttpRequest) и axios
1. Это программирование для MVC, которое не соответствует нынешней волне фронтенд MVVM.
2. Основываясь на собственной разработке XHR, архитектура самого XHR не ясна.
3. Весь проект JQuery слишком велик, очень неразумно использовать Ajax для представления всего JQuery (невозможно пользоваться услугой CDN с персонализированным пакетом)
4. Не соответствует принципу разделения проблем.
5. Методы настройки и вызова очень сбивают с толку, а асинхронная модель на основе событий неудобна.
MVVM (Model-View-ViewModel), производный от классического шаблона Model-View-Controller (MVC). Появление MVVM способствует разделению интерфейсной разработки графического интерфейса пользователя и внутренней бизнес-логики, что значительно повышает эффективность интерфейсной разработки. Ядром MVVM является уровень ViewModel, который похож на преобразователь значений, который отвечает за преобразование объектов данных в модели, чтобы упростить управление и использование данных. Этот уровень выполняет двустороннюю привязку данных со слоем представления. Взаимодействие данных между нижним уровнем и уровнем модели посредством запроса интерфейса играет роль восходящего и нижнего. Слой представления отображает не данные уровня модели, а данные модели представления. Модель представления отвечает за взаимодействие со слоем модели. Это полностью разделяет слой представления и уровень модели. Это разделение имеет решающее значение. Это разделение лицевой и оборотной сторон.Самая важная часть реализации задуманного.
Является экземпляром XMLHTTPRequest;
Запрос считается успешным только при статусе 200 или 304;
1. XMLHttpRequest Данные запроса
2. fetch Данные запроса
. fetch Четыре способа запроса
получить запрос
Если вам нужно передать параметры, вам нужно соединить url 。
Первый вызов здесь then В функции возвращаемый результат представляет собой читаемую потоковую форму
Если запрос представляет собой данные json, вам необходимо позвонить response.json() (Вот response Переданный параметр) анализирует читаемый поток в данные json, в следующем then В методе можно получить желаемые данные json
для catch Метод будет выполнен только при сообщении об ошибке программы.
отправить запрос
К тому же, fetch допустимый header Средняя установка CORS Междоменный
Если сервер не поддерживает CORS ， fetch Предусмотрено три режима, из которых no-cors Может продолжить доступ к серверу
fetch из mode Элемент конфигурации имеет 3 значения, а именно:
Для междоменных запросов режим cors является распространенной реализацией междоменных запросов, но режим междоменных запросов no-cors, который поставляется с выборкой, относительно незнаком. Этот режим имеет более очевидную особенность:
Этот режим позволяет браузеру отправлять этот междоменный запрос, но не может получить доступ к содержимому, возвращаемому в ответе, поэтому его тип ответа непрозрачный и прозрачный, как показано на следующем рисунке:
Примечание: cors поддерживает три типа content-type не поддерживается application/json
body : Параметры для передачи
fetch По умолчанию запрос не передается cookie Информация, если вы хотите ее носить, вам нужно установить вручную
credentials: «include» Установить заголовок запроса для переноса cookie Информация
поставить запрос
удалить запрос
Русские Блоги
Смотрите разницу между Jquery ajax, Axios и Fetch
введение
Передовые технологии действительно являются областью быстрого развития. Когда я присоединился к работе три года назад, у меня был только нативный XHR и Jquery Ajax. Мы также застряли на долгое время, потому что JQuery версии 1.9 и ниже не поддерживают запросы больших файлов (я наконец написал свой собственный нативный XHR запрос). В мгновение ока JQuery ajax больше не может специализироваться в прошлом, и как axios, так и fetch начали захватывать интерфейсную часть «request» отдельно. Эта статья попытается объяснить разницу между ними и дать некоторое представление о себе.
1 JQuery ajax
Мне не нужно больше говорить об этом. Это пакет родного XHR. Кроме того, он также добавляет поддержку JSONP. Иными словами, JQuery ajax обновлялся и поддерживался в течение многих лет, это действительно очень удобно, и о преимуществах говорить не приходится: если необходимо указать несколько недостатков, это может быть только
Хотя JQuery оказал (и все еще оказывает) далеко идущее влияние на нашу работу по разработке интерфейса, мы видим, что с ростом VUE, среды REACT нового поколения, улучшением спецификаций ES, расширением обновлений API, JQuery это Большая и всеобъемлющая библиотека JS, будущая дорога будет становиться все уже и уже.
Резюме: Лиан По стар и все еще может есть, но всегда будет день, когда он не сможет двигаться.
2 Axios
Эта поддержка предотвращения CSRF на самом деле довольно забавная, как сделать так, чтобы каждый ваш запрос приносил ключ от куки, согласно политике гомологии браузера, поддельные сайты не могут получить ваш куки Ключ выбран так, чтобы фон мог легко отличить, является ли запрос вводящим в заблуждение вводом пользователя на фальшивом веб-сайте, чтобы принять правильную стратегию.
Axios не только обеспечивает параллельную упаковку, но и не имеет различных проблем извлечения, упомянутых ниже, и объем также относительно невелик. Сейчас вполне заслуженно выбрать наиболее востребованный метод.
Краткое описание: Кто посмеет немедленно пересечь меч, только генерал Аксиос!
3 Fetch
получить претензии на замену AJAX, и его преимущества вТрадиционный Аякс мертв, Фетч навсегда«» Упомянул следующие моменты:
Честно говоря, приведенные выше причины для меня совершенно неубедительны, потому что и Jquery, и Axios помогли нам достаточно хорошо упаковать пакет xhr и использовать его достаточно удобно. Почему нам приходится тратить много усилий, чтобы научиться извлекать?
Я думаю, что основными преимуществами fetch являются:
Все любят новые вещи. Честно говоря, будучи инженером внешнего интерфейса, когда я использую нативный XHR, я иногда чувствую себя неловко, когда пишу, но после использования JQuery и axios это совершенно безразлично к этому. Конечно, если новая выборка может работать одинаково хорошо, я выберу ее, чтобы не отставать. Эту истину на самом деле очень легко понять: у вас есть J-8, магия была изменена N раз, и производительность достигла уровня J-10, но если кто-то принесет вам новую J-10, вы без колебаний выберете Новый J-10 не только новый, но и представляет новый потенциал для магической реформы.
Однако недавно я столкнулся со многими проблемами при использовании fetch:
1) извлекает только сообщения об ошибках для сетевых запросов и обрабатывает 400 и 500 как успешные запросы, которые необходимо инкапсулировать для обработки
2) Fetch по умолчанию не приносит куки, вам нужно добавить элементы конфигурации
3) Fetch не поддерживает прерывание и не поддерживает управление тайм-аутом. Управление тайм-аутом, реализованное с помощью setTimeout и Promise.reject, не препятствует продолжению выполнения запроса в фоновом режиме, что приводит к потере трафика
4) Fetch не может контролировать ход выполнения запроса, а XHR может
После этого мы получим возврат типа «непрозрачный». Следует отметить, что этот запрос действительно поступил в фоновом режиме, поэтому мы можем использовать этот метод для сообщения информации. В нашем предыдущем методе image.src есть дополнительная опция. Кроме того, мы можем видеть в сети Реальный возврат после установки междоменного заголовка на фоне этого запроса помогает нам заранее отладить интерфейс (конечно, мы также можем сделать это через плагин chrome). Короче говоря, fetch не очень прост в использовании, я пробовал несколько пакетов fetch, и они не являются удовлетворительными.
Резюме: дети Вождя еще должны расти
резюме
Если вы тянете прямо к нижней части статьи, вам нужно только знать, что использование axios больше не нужно: Jquery старый и неуклюжий, fetch молодой и незрелый, только Axios в его правильном году!
Аксиос по китайский
Инструкция по применению
Features
Поддержка браузера
устанавливать
Example
выполнение GET запрос
выполнение POST запрос
Выполнить несколько одновременных запросов
axios API
Вы можете пойти в axios Ø Передайте соответствующую конфигурацию для создания запроса
Псевдоним метода запроса
Для удобства предусмотрены псевдонимы для всех поддерживаемых методов запроса.
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
При использовании метода псевдонима, url 、 method 、 data Эти атрибуты не обязательно указывать в конфигурации.
осложненной
Вспомогательная функция для обработки одновременных запросов
Создать экземпляр
Вы можете использовать пользовательскую конфигурацию для создания нового экземпляра axios
Метод экземпляра
Доступны следующие примеры методов. Указанная конфигурация будет объединена с конфигурацией экземпляра.
axios#post(url[, data[, config]])
axios#put(url[, data[, config]])
axios#patch(url[, data[, config]])
Запрос конфигурации
Структура ответа
Ответ на запрос содержит следующую информацию
использование then В это время вы получите следующий ответ:
Используется catch Когда или передатьrejection callbackв качестве then Второй параметр, ответ может быть передан error Объекты могут быть использованы, как вОбработка ошибокВ этом разделе.
Настроенные значения по умолчанию / по умолчанию
Вы можете указать настройки по умолчанию, которые будут использоваться в каждом запросе
Глобальный аксиос по умолчанию
Пользовательский экземпляр по умолчанию
Приоритет конфигурации
Конфигурации объединяются в приоритетном порядке. Заказ: в lib/defaults.js Значение по умолчанию для найденной библиотеки, затем экземпляр defaults Атрибуты, наконец, запрошенные config Параметры. Последний будет иметь приоритет над первым. Вот пример:
истребитель-перехватчик
Запрос или ответ then или catch Перехватите их перед обработкой.
Если вы хотите удалить перехватчик позже, вы можете сделать это:
Перехватчики могут быть добавлены для пользовательских экземпляров axios
Обработка ошибок
Можно использовать validateStatus Параметры конфигурации определяют пользовательский диапазон ошибок кода состояния HTTP.
отменен
использованиеcancel tokenЗапрос на отмену
API отмены токенов Axios основан наcancelable promises proposalЭто все еще на первом этапе.
Можно использовать CancelToken.source Фабричный метод создает токен отмены, например так:
Вы также можете передать функцию исполнителя CancelToken Конструктор для создания токена отмены:
Примечание. Вы можете использовать один и тот же токен отмены для отмены нескольких запросов.
Semver
Promises
Axios полагается на собственную реализацию ES6 Promise иподдержанный.
Если ваша среда не поддерживает ES6 Promise, вы можете использоватьpolyfill.
TypeScript
axios includes TypeScript definitions.
Resources
Credits
License
В-четвертых, VueJs, чтобы заполнить дневник ямы для создания инструмента запроса интерфейса Axios
В последней главе мы узнали структуру каталогов проекта и внесли некоторые изменения в структуру каталогов проекта, что позволило запустить проект снова. Сегодня мы создадим Axios, инструмент для вызова API. Сам Vue не поддерживает вызовы ajax, если вам нужны эти функции, вам необходимо установить соответствующие инструменты.
Есть много инструментов, которые поддерживают запросы ajax, такие как superagent и axios. Сегодня мы используем axios, потому что я слышал, что большинство учебников в Интернете в последнее время используют axios. Сам инструмент axios был хорошо оптимизирован и упакован, но при использовании он все еще относительно громоздок, поэтому мы приходим Упакуйте это.
Установить инструменты Axios
При установке обязательно переключитесь в корневой каталог нашего проекта, а затем запустите команду установки, а затем, если появится указанная выше информация, установка завершена.
Применение в React REST API с помощью Fetch и Axios
Если вы являетесь React-разработчиком и хотите узнать, как начать использовать API в своих React-приложениях, то эта статья для вас. Мы объясним, что такое REST API и как можно создать простое приложение, которое использует REST API с помощью Fetch API и Axios.
Применить REST API в React-приложениях можно различными способами, но в этом руководстве мы рассмотрим, то, как можно применить REST API, используя два наиболее популярных метода, известных как Axios (HTTP-клиент на основе промисов) и Fetch API (встроенный в браузер веб-API). Мы подробно рассмотрим и реализуем каждый из этих методов и объясним некоторые интересные функции, которые может предложить каждый из этих методов.
API — это то, что мы можем использовать, чтобы загрузить React-приложения данными. Есть определенные операции, которые нельзя выполнить на стороне клиента, поэтому эти операции выполняются на стороне сервера. Затем мы можем использовать API-интерфейсы для использования данных на стороне клиента.
API состоят из набора данных, которые часто представлены в формате JSON с указанными конечными точками. Когда мы получаем доступ к данным из API, мы хотим получить доступ к определенным конечным точкам в этой структуре API. Также можно сказать, что API — это соглашение между двумя службами в форме запроса и ответа. Код является побочным продуктом. Он также содержит условия обмена данными.
В React доступны различные способы использования REST API в приложениях, в том числе использование встроенного JavaScript- метода fetch() и Axios, который является HTTP-клиентом на основе промисов для браузера и Node.js.
Примечание. Хорошее знание ReactJS, React Hooks, JavaScript и CSS пригодится вам, когда вы будете изучать это руководство.
Давайте начнем с изучения дополнительных сведений о REST API.
Что такое REST API
REST API — это API, который структурирован в соответствии с REST структурой для API. REST означает «передача состояния представления». Он состоит из различных правил, которым следуют разработчики при создании API.
Преимущества REST API
Пример ответа REST API
То, как структурирован REST API, зависит от продукта, для которого он был создан, но при этом должны соблюдаться правила REST.
Применение API с помощью Fetch API
Метод fetch() API всегда принимает обязательный аргумент, представляющий собой путь или URL-адрес ресурса, который вы хотите получить. Он возвращает промис, который указывает на ответ от запроса, независимо от того, был ли запрос успешным или нет. При желании вы также можете передать объект параметров инициализации в качестве второго аргумента.
После получения ответа доступно несколько встроенных методов, позволяющих определить, каково содержимое тела и как его следует обрабатывать.
Разница между Fetch API и jQuery Ajax
Fetch API отличается от jQuery Ajax тремя основными моментами:
Параметры для Fetch API
Базовый синтаксис для использования Fetch API
Простой запрос на выборку может выглядеть следующим образом:
В приведенном выше коде мы извлекаем данные из URL-адреса, который возвращает данные в формате JSON, а затем выводим их в консоль. Простейшая форма использования fetch() часто принимает только один аргумент — путь к ресурсу, который вы хотите получить, и затем возвращает промис, содержащий ответ на запрос на выборку. Этот ответ является объектом.
Ответ — это обычный HTTP-ответ, а не фактический JSON. Другими словами, чтобы получить содержимое тела JSON из ответа, нам нужно изменить ответ на фактический JSON, используя в ответе метод json().
Использование Fetch API в приложениях React
Использование Fetch API в React-приложениях — это стандартный способ, которым мы использовали бы Fetch API в JavaScript, синтаксис не изменится. Единственная проблема — решить, где выполнить запрос на выборку в React- приложении. Большинство запросов на выборку или HTTP-запросы любого рода обычно выполняются в React Component.
Например, в приведенном ниже коде мы выполним запрос на выборку внутри компонента класса, а это означает, что мы должны сделать это внутри метода жизненного цикла. В этом конкретном случае наш запрос на выборку будет выполнен внутри метода жизненного цикла componentDidMount, потому что мы хотим выполнить запрос сразу после монтирования компонента React.
В приведенном выше коде мы создаем очень простой компонент класса, который после завершения монтирования компонента React выполняет запрос на выборку, выводящий окончательные данные из запроса на выборку по URL-адресу API в консоль браузера.
Метод fetch() принимает путь к ресурсу, который мы хотим извлечь, он присваивается переменной с именем apiUrl. После завершения запроса на выборку возвращается промис, содержащий объект ответа. Затем мы извлекаем из ответа содержимое тела JSON, используя метод json(), и, наконец, выводим окончательные данные из промиса в консоль.
Давайте применим REST API с помощью метода Fetch
В этом разделе мы создадим простое React- приложение, которое использует внешний API, при этом мы будем применять метод Fetch для использования API.
Простое приложение будет отображать все репозитории, которые принадлежат конкретному пользователю, и их описание. В этом руководстве я буду использовать свое имя пользователя GitHub, вы также можете использовать свое, если захотите.
Первое, что нам нужно сделать, это сгенерировать React-приложение с помощью create-react-app:
Эта команда загрузит новое React-приложение. Когда новое приложение будет создано, остается только запустить приведенную ниже команду и начать создание кода:
Если все было сделано правильно, мы должны увидеть это в окне браузера, когда перейдем по адресу localhost:3000 после выполнения приведенной выше команды.
Файл List.js будет обрабатывать отображение рипозиториев в виде списка, а файл withListLoading.js будет содержать компонент высшего порядка, который будет отображаться, когда запрос Fetch будет находиться в процессе выполнения.
Давайте вставим приведенный ниже код в файл List.js, который мы создали внутри папки components:
Приведенный выше код является базовым компонентом списка React, который отображает данные, в нашем конкретном случае, имена репозиториев и их описания в списке.
Теперь позвольте мне объяснить код по частям.
Мы инициализируем свойство для компонента, который называется repos.
Все, что мы делаем здесь — это создаем условный оператор, который будет отображать сообщение, когда длина repos, получаемого нами из запроса, равна нулю.
Здесь мы сопоставляем каждый из репозиториев, который будет предоставлен запросом API, и извлекаем каждое из имен репозиториев и их описания, а затем отображаем их в списке.
Здесь мы экспортируем компонент List, чтобы иметь возможность использовать его где-то еще.
В файл withListLoading.js, который мы создали в папке components, давайте вставим следующий код:
Файл App.js является функциональным компонентом, который использует React Hooks для обработки состояния, а также побочных эффектов.
Позвольте мне объяснить приведенный выше код.
Здесь мы импортируем все необходимые внешние файлы, а также компоненты, которые создали в папке components. Мы также импортируем нужные нам React Hooks.
Здесь мы создаем новый компонент с именем ListLoading и назначаем withListLoadingкомпонентом высшего порядка, обернутым вокруг компонента списка. Затем мы создаем значения состояния loading и repos и используем React Hook useState().
Здесь мы инициализируем React Hook useEffect(). В хуке useEffect() мы устанавливаем для начального состояния загрузки значение true, пока это так, наш компонент более высокого порядка будет отображать сообщение. Затем мы создаем глобальную переменную с именем user и назначаем ей URL API, из которого будем получать данные репозиториев.
Затем мы выполняем базовый запрос fetch(), как мы уже рассмотрели выше, а затем, после того как запрос выполнен, мы устанавливаем для состояния загрузки приложения значение false и заполняем состояние репозитория данными, которые получили из запроса.
Здесь мы в основном просто отображаем Component, который мы назначили компонентом высшего порядка, а также заполняем свойства isLoading и repos значениями состояния.
Теперь, когда запрос на выборку находится в процессе выполнения, мы должны увидеть в браузере следующее:
Когда запрос на выборку завершился успешно, мы должны увидеть репозитории, отображаемые в виде списка, как показано ниже.
С помощью приведенного выше кода мы сделаем наше приложение выглядящим более аккуратно, мы присваиваем различные имена классов каждому элементу в файле App.js и, таким образом, используем эти имена классов для стилизации приложения.
После того, как мы применили стили, приложение должно выглядеть следующим образом:
Теперь приложение выглядит намного лучше.
Вот как мы можем использовать Fetch API для применения REST API. В следующем разделе мы рассмотрим Axios и то, как мы можем использовать его для применения того же API в том же приложении.
Применение API с помощью Axios
Axios — это простой в использовании HTTP-клиент для браузера и node.js на основе промисов. Поскольку Axios основан на промисах, мы можем воспользоваться асинхронностью и ожидать более читабельного и асинхронного кода. С помощью Axios мы получаем возможность перехватывать и отменять запросы, а также у нас появится встроенная функция, которая обеспечивает защиту от подделки межсайтовых запросов на стороне клиента.
Функции Axios
Выполнение запросов с помощью Axios
Выполнить HTTP-запросы с помощью Axios довольно просто. Приведенный ниже код демонстрирует выполнение HTTP-запроса.
Приведенный выше код демонстрирует основные способы выполнения HTTP-запросов GET и POST с помощью Axios.
Axios также предоставляет набор сокращенных методов для выполнения различных HTTP-запросов:
Например, если мы хотим выполнить запрос, аналогичный примеру кода, приведенного выше, с помощью сокращенных методов, мы можем сделать это следующим образом:
В приведенном выше коде мы выполняем тот же запрос, что и в предыдущем примере, но на этот раз с помощью сокращенного метода. Axios обеспечивает гибкость и делает HTTP-запросы еще более читабельными.
Выполнение нескольких запросов с помощью Axios
Axios предоставляет разработчикам возможность создавать и обрабатывать одновременные HTTP-запросы с использованием метода axios.all(). Этот метод принимает массив аргументов и возвращает один объект промиса, который разрешается только после разрешения всех аргументов, переданных в массиве.
Например, мы можем выполнить несколько запросов к API GitHub, используя метод axios.all(), приведенный ниже:
Приведенный выше код параллельно выполняет запросы к массиву аргументов и возвращает данные ответа, в нашем случае он выводит в консоль объект created_at из каждого из ответов API.
Давайте применим REST API с клиентом Axios
В этом разделе мы заменим в нашем существующем React-приложении метод fetch() на Axios. Все, что нам нужно сделать, это установить Axios, а затем использовать его в файле App.js для отправки HTTP-запроса к API GitHub.
Теперь давайте установим Axios в нашем React-приложении, выполнив одно из следующих действий:
После завершения установки мы должны будет импортировать axios в App.js. В файле App.js мы добавим в самое начало следующую строку:
После добавления этой строки кода в файл App.js все, что нам нужно будет сделать, это внутри useEffect() прописать следующий код:
Возможно, вы заметили, что теперь мы заменили fetch API на сокращенный метод Axios axios.get, чтобы выполнить get-запрос к API.
В этом блоке кода мы выполняем запрос GET, затем возвращаем промис, содержащий данные репозиториев, и присваиваем данные глобальной переменной с именем allRepos. Затем мы устанавливаем для текущего состояния загрузки значение false и также передаем данные из запроса в переменную состояния repos.
Если вы все сделали правильно, то увидите, что наше приложение по-прежнему отображается без каких-либо изменений.
Вот как мы можем использовать клиент Axios для применения REST API.
Fetch или Axios
В этом разделе я перечислю некоторые функции, а затем расскажу, насколько хорошо Fetch и Axios поддерживают их.
Заключение
И Axios, и fetch() — это отличные способы применения API, но я советую использовать fetch() при создании относительно небольших приложений и Axios при создании больших приложений по причинам масштабируемости. Надеюсь, вам понравилось работать с этим руководством, вы всегда можете прочитать больше о применении REST API с помощью Fetch или Axios в источниках по ссылкам ниже. Если у вас есть какие-либо вопросы, вы можете задать их в комментариях к этой статье.
Дополнительные ресурсы
Пожалуйста, оставьте ваши комментарии по текущей теме статьи. За комментарии, подписки, дизлайки, отклики, лайки низкий вам поклон!