Что такое ajax?
Asynchronous JavaScript и XML (Ajax) – это способ общаться с веб-сервером из приложения клиента через Http или Https протокол.
Несмотря на то, что AJAX удерживает XML во имя, то, как данные отправляются через запросы или полученные не должны быть XML, но и простой текст, или в большинстве случаев JSON, из-за того, что он более легче, и часть JavaScript в сам.
Почему Ajax полезно?
Vue.js Используется в качестве передней структуры, и если вы когда-либо хотите общаться с сервером, получать или хранить информацию в базу данных или выполнять некоторые расчеты на ваши данные, которые вы, скорее всего, понадобится Ajax Отказ
Хотя …| Ajax Может использоваться путем создания XMLHTTPREQUEST Объект, который будет доступен через браузер. Есть определенные пакеты, которые могут помочь нам общаться с нашим сервером.
Vue.js имеет официальный пакет, который называется Vue-Resource который работает как клиент HTTP, но официальная документация предлагает использовать Axios Отказ
Установка Axios и настройка компонента
Axios это клиент HTTP, и он может быть установлен в наше Package.json Зависимости через ваш пакет менеджер по выбору, будь то NPM или Пряжа :
$ npm install axios OR $ yarn add axios
После установки мы можем создать минималистичный тестовый компонент для демонстрационных целей:
// Test.vue
Использование Axios в Vue компонентах
Запросы на сервер по HTTP найдите определенное время, чтобы вернуться с ответом, и, чтобы убедиться, что информация, показанная пользователю, является правильной, Обещания Придется использовать, чтобы убедиться, что данные вернулись, прежде чем продолжить наше выполнение кода.
Чтобы использовать его в компоненте, мы просто импортируем пакет и назначаем его переменной:
// Test.vue
Как правило, вызовы API выполняются внутри монтируется Vue жизненный цикл крюк.
Мы собираемся использовать Mock JSON Data Service под названием Jsonsholder Отказ Это симуляция для того, как будет выглядеть конечная точка задней стороны при ударе A Отдых API :
// Test.vue
В приведенном выше примере кода компонент отображается до информации от Jsonsholder прибыл. Следовательно, использование обещаний удостоверится, что мы можем справиться с данными и добавить его на наш взгляд.
Обработка ответов с тогдашним ()
тогда () Функция, позволяет нам манипулировать нашим обещанием и сказать нашему коду, что мы собираемся сделать, если/когда запрос был успешным. Например, мы можем, например, с функцией обратного вызова, проверьте наш ответ в консоли:
mounted() {
axios.get("https://jsonplaceholder.typicode.com/todos/")
.then(response => console.log(response))
}
Ответ был возвращен, и мы видим его внутри консоли браузера, но как мы показываем пользователю список TODOS?
Мы должны держать список Тодос внутри данные Объект для будущего ссылки внутри дома.
Мы назовем это Тодослист И мы будем скопировать свойство данных объекта ответа в неизменном виде (так что мы не изменяем фактический объект ответа) с помощью JavaScript Распространение Оператор и просто показать первые 10 элементов, используя ломтик Функция массива, так что мы не загружаем сотни TODOS:
Обработка ошибок с уловом ()
Что произойдет, если запрос не удается? Состояние заявления должно будет управляться соответственно. Для этого у нас есть поймать () Функция, которая может быть вложена в наш функциональный стек:
mounted() {
axios.get("https://jsonplaceholder.typicode.com/todos/")
.then(response => console.log(response))
.catch(err => {
// Manage the state of the application if the request
// has failed
})
}
Таким образом, мы видим, что появляется сообщение о ошибках, и мы можем сделать много вещей с ним, например, показать сообщение об ошибке пользователю как предупреждение или показать карту «No ToDos доступно». Возможности безграничны.
Показывая тодос
Используя V-для Vue Directive Мы можем ввести наши Тодос внутри шаблона и добавить немного стиля для визуальных целей:
- {{ todo.id }}
Если мы проверим свой браузер, мы увидим что-то вроде этого:
Поздравляем, мы только что отправили HTTP-запрос на API и отображали данные пользователю!
Async/await против обещаний
Async/a enaiq – это относительно новая языковая конструкция JavaScript, которая делает наш асинхронный код намного очистителем.
Несмотря на то, что вызовы async/a ждать будут транслированы на обещания в конце концов, он передает другой подход, поскольку нам больше не нужно настроить функции обратного вызова для нашего кода, мы все знаем, как сильно мы ненавидим!
Наш пример кода, с помощью Async/await будет выглядеть что-то вроде следующего, добавляя некоторую магию разрушения объекта, чтобы наш код выглядеть еще лучше:
// Test.vue
async mounted() {
const url = 'https://jsonplaceholder.typicode.com/todos/'
const { data } = await axios.get(url)
this.todosList = [...data].slice(0, 10)
}
Крюк установленного жизненного цикла префиксирован с async ключевое слово. Это гарантирует, что крюк возвращает обещание.
Внутри крючка, ждать Ключевое слово заставляет функцию под названием ждать, пока его разрешение будет продолжаться.
Заключение
Ajax является ключевой частью современного веб-разработки, и, хотя это может сначала выглядеть неустойчивым, имея его в своем арсенале, является обязательным.
Сама природа Vue.js заставляет вас подумать о вашем коде асинхронно, чтобы вы могли правильно обновлять свои компоненты, что дает своим пользователям удивительный опыт.
Для получения дополнительной информации о асинхронном коде для Vue вы можете проверить Vue.js Кулинарная книга Отказ