Каковы различия в использовании Axios vs jQuery для HTTP-запросов?

Я был пользователем jQuery с навсегда. Но теперь я создаю свой первый API, который использует JWT для аутентификации. Это говорит о том, что большинство обучающих программ, которые я нахожу в Интернете, чтобы использовать этот API с заголовками аутентификации, используют Axios для выполнения этих запросов.

Я уже использую jQuery в проекте, поэтому мне бы хотелось сделать простые jQuery-вызовы ajax, но я не уверен, есть ли какие-либо серьезные недостатки в его использовании.

Это будет мой код jQuery:

$.ajax({
  url: "http://localhost:8080/login",
  type: 'POST',
  data: formData,
  error : function(err) {
    console.log('Error!', err)
  },
  success: function(data) {
    console.log('Success!')
    localStorage.setItem('token', data.id_token);
  }
});

Отправить запрос

$.ajax({
  url: "http://localhost:8080/login",
  type: 'GET',
  // Fetch the stored token from localStorage and set in the header
  headers: {"Authorization": localStorage.getItem('token')}
});

После прочтения функций Axios последний: поддержка на стороне клиента для защиты от XSRF. Не поддерживает ли jQuery ajax это? Должен ли я сделать что-нибудь дополнительное, чтобы сделать эту защиту? Есть ли что-нибудь еще, что заставляет использовать другую библиотеку, например, Axios вместо jQuery?

Ответ 1

Я не вижу явной поддержки этого в документации jQuery $.ajax. При этом вы можете сделать это с настройкой beforeSend. В beforeSend вы должны изменить jqHXR, чтобы включить информацию о XSRF.

@charlietfl упомянул, что вы также можете сделать это в глобальном ajaxSend(), поэтому он применяется ко всем экземплярам $.ajax()

Это то, что делает axios:

  // `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
  xsrfCookieName: 'XSRF-TOKEN', // default

  // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
  xsrfHeaderName: 'X-XSRF-TOKEN', // default

Если вы уже используете jQuery в своем проекте, и вы можете обращаться с XSRF самостоятельно, используйте $.ajax().

"Есть ли что-нибудь еще, что позволяет использовать другую библиотеку, например, Axios вместо jQuery?"

Я бы сказал, что определенно. Библиотека, предназначенная для обработки http, отделяет процесс от структуры приложения или библиотеки презентаций.

Ответ 2

Добавить поддержку CSRF (XSRF) в jquery так же просто, как добавить следующие строки на свою страницу после загрузки jquery (с отображением вашего токена в метатеге на вашей странице):

$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});

Я обнаружил (в прошлом), что у Аксиоса больше проблем, чем оно того стоит. Простые процедуры, такие как выполнение запроса GET для запроса списка ресурсов, изменение элемента в списке с помощью запроса POST/PUT/DELETE, а затем повторный запрос списка (для синхронизации представления) приводит к обслуживанию кэшированных данных, что означает вид не меняется. Это только один пример.

Изменить: Я в настоящее время работаю над проектом Vue.js, и я вспомнил еще несколько причин, почему я придерживался jquery над axios:

Стоит отметить, что если вы используете bootstrap или что-то подобное, у вас уже есть jquery, так зачем включать вторую библиотеку?

И, наконец, я использую простой скрипт, который преобразует любую стандартную HTML-форму в форму представления AJAX, просто добавив пару классов и загрузочное предупреждение для отображения ошибок. Он предназначен для использования с Laravel и (опционально) Vue.js. Это действительно удобно, потому что обрабатывает стили компонентов формы, чтобы сообщить пользователю, что происходит. Для отладки ошибок на стороне сервера вы можете просто удалить класс "ajax-submit" из формы, и он вернется к стандартной отправке формы. Вспомогательные операции в скрипте проще всего реализованы с использованием jQuery. Я поместил это в суть здесь. Надеюсь, кто-то найдет это полезным.

На самом деле мне было бы очень интересно посмотреть, насколько сложно создать эквивалентный скрипт с использованием Axios и исключая jQuery

Дальнейшее редактирование: Мне просто нужно было удалить Axios из еще одного проекта. Это приложение PWA, и Axios не имеет возможности использовать API выборки, который требуется для использования сервисными работниками. Я создал суть, чтобы заменить Axios на fetch. Возможно, это кому-нибудь пригодится.