Мое мнение о разнице между Jquery ajax, Axios, Fetch

JavaScript axios

введение

Фронтенд технологии действительно быстро развивающаяся сфера.Когда я пришел в компанию три года назад, у меня были только родные XHR и Jquery ajax.спрашивайте). В мгновение ока JQuery ajax уже давно не может специализироваться на красоте, и как axios, так и fetch начали захватывать передний край «запроса» соответственно. В этой статье я попытаюсь объяснить разницу между ними и дать некоторое собственное понимание.

1 JQuery ajax

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

Мне не нужно больше говорить об этом, это инкапсуляция нативного XHR, а вдобавок к этому еще добавлена ​​поддержка JSONP. Одна вещь, которую нужно сказать, JQuery ajax был очень удобен после многих лет обновлений и сопровождения, и о преимуществах не нужно много говорить; если вы настаиваете на упоминании нескольких недостатков, это может быть только

  • Это программирование для самого MVC, что не соответствует текущей волне внешнего интерфейса MVVM.
  • Исходя из нативной разработки XHR, сама архитектура XHR не ясна, и уже есть альтернатива fetch
  • Весь проект JQuery слишком велик, и очень неразумно внедрять весь JQuery просто с помощью ajax (решение для персонализированной упаковки не может пользоваться сервисом CDN).

Хотя JQuery оказал (и до сих пор оказывает) глубокое влияние на нашу разработку интерфейса, мы можем видеть это с появлением фреймворков нового поколения VUE и REACT, а также с улучшением спецификаций ES, большим количеством обновлений API, JQuery. Большая и всеобъемлющая библиотека JS, дорога в будущее будет все уже и уже.

Описание: Лиан По стар и все еще может есть, но всегда будет день, когда он не будет есть.

2 Axios

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

После Vue2.0 Ю Юйси рекомендовал заменить JQuery ajax на axios, что, должно быть, привлекло внимание многих людей. Axios — это, по сути, пакет родного XHR, но это версия реализации Promise, которая соответствует последней спецификации ES.На официальном сайте вы можете увидеть, что он имеет следующие функции:

  • Создать http-запрос из node.js
  • Обещанная поддержка API
  • Поддержка клиентов для предотвращения CSRF
  • Предоставляет некоторые интерфейсы для одновременных запросов(Важно, удобно для многих операций)

Эта поддержка для предотвращения CSRF на самом деле очень интересна. Как это сделать, чтобы каждый запрос содержал ключ, полученный из файла cookie. В соответствии с политикой браузера о том же происхождении поддельные веб-сайты не могут получить ваш файл cookie. Если ключ получен, background может легко определить, является ли запрос вводящим в заблуждение вводом пользователя на поддельном веб-сайте, чтобы принять правильную стратегию.

Axios не только обеспечивает параллельную инкапсуляцию, но и не имеет различных проблем с выборкой, упомянутых ниже, а также имеет небольшой размер и достоин того метода запроса, который сейчас следует выбирать больше всего.

Резюме: Кто посмеет немедленно скрестить меч, только Генерал Аксиос!

3 Fetch

Fetch утверждает, что является альтернативой AJAX, и его преимущества заключаются в «Традиционный Ajax мертв, Fetch навсегда«Назначение в следующих моментах:

  • В соответствии с разделением ответственности нет смешивания ввода, вывода и состояния, отслеживаемого событиями в одном объекте.
  • Лучше и удобнее писать, например:
try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}

Честно говоря, приведенные выше доводы меня совершенно не убеждают, ведь и Jquery, и Axios уже помогли нам достаточно хорошо упаковать xhr и достаточно удобно им пользоваться, а зачем нам тратить много сил на то, чтобы научиться fetch?

Я думаю, что основными преимуществами выборки являются:

  • Более низкоуровневый, предоставляет богатый API (запрос, ответ)
  • Из XHR это новая реализация в спецификации ES.

Все любят новое, честно говоря, как фронтенд-инженер, когда я использую нативный XHR, хотя иногда чувствую, что это некрасиво, после использования JQuery и axios, меня это вообще не волнует. Конечно, если новая выборка может работать так же хорошо, я бы предпочел использовать выборку, чтобы не отставать. Этот принцип на самом деле очень прост для понимания: у вас есть J-8, он N раз модифицировался, и его характеристики достигли уровня J-10, но если вам кто-то принесет новый J-10, вы выберете без колебания.Новый J-10 - не только новый, но и представляет собой новый потенциал для магической трансформации.

Но когда я недавно использовал fetch, я также столкнулся с множеством проблем:

  • fetch — это низкоуровневый API, вы можете думать о нем как о нативном XHR, поэтому его не так удобно использовать и его нужно инкапсулировать.

Например:

1) fetch сообщает только об ошибках сетевых запросов, 400 и 500 считаются успешными запросами, которые необходимо инкапсулировать для обработки
2) По умолчанию Fetch не будет хранить файлы cookie, и вам необходимо добавить элементы конфигурации.
3) выборка не поддерживает прерывание и не поддерживает управление тайм-аутом.Контроль тайм-аута, реализованный с помощью setTimeout и Promise.reject, не может предотвратить продолжение выполнения запроса в фоновом режиме, что приводит к пустой трате трафика
4) Fetch не имеет встроенной возможности отслеживать ход выполнения запроса, в то время как XHR может

PS: Для конкретных проблем с выборкой вы можете обратиться к: "фетч не так прекрасен, как ты думаешь""Распространенные проблемы и решения, используемые fetch》

Увидев это, у вас наверняка возник вопрос, это дерьмо — всего лишь полусырой проект, я вернусь к использованию jQuery или Axios — собственно, это то, что я планировал. Однако следует отметить, что я обнаружил, что у fetch есть возможность, которой xhr не может соответствовать во внешних приложениях: междоменная обработка.

Все мы знаем, что из-за политики одного и того же источника запросы браузера могут быть случайным образом междоменными — должен быть междоменный заголовок или JSONP, но режим выборки может быть установлен на «no-cors» (не междоменный). домен), следующим образом:

fetch('/users.json', {
    method: 'post', 
    mode: 'no-cors',
    data: {}
}).then(function() { /* handle response */ });

После этого мы получим возврат типа «непрозрачный». Следует отметить, что этот запрос действительно пришел в фоновом режиме, поэтому мы можем использовать этот метод для передачи информации.В нашем предыдущем методе image.src есть дополнительная опция.Кроме того, мы можем видеть в сети фактический возврат после установки междоменного заголовка в фоне запроса помогает нам заранее отладить интерфейс (конечно, мы можем сделать это и через плагин для хрома). Короче говоря, пользоваться fetch сейчас не очень просто, я пробовал несколько пакетов с fetch, но они меня не удовлетворили.

Краткое содержание: Ребёнку вождя нужно повзрослеть

Суммировать

Если тянул сразу в конец статьи, то надо только знать, что аксиос можно использовать и без мозгов сейчас, Jquery старый и корявый, fetch молодой и незрелый, и только Axios на старости лет!

Категории