AJAX на axios.js

Метки: / /

В этой статье вы прочитаете про библиотеку axios.js, которая позволяет работать с AJAX, будут примеры.

Также, посмотрите статью: Как работать с AJAX на JQuery, это если вам нужен JQuery.

Подключение Axios.JS:

Первым делом нужно подключить библиотеку, это можно сделать, через терминал или через CDN.

Терминал:

Если вы решите установить через терминал, то тут есть три способа, NPM, Bower и Yarn.

Используя NPM:

Используя Bower:

Используя Yarn:

Axios.js через CDN:

Если вы хотите через CDN, то для этого просто подключите скрипт в <head>.

Дальше в коде подключаем через require или inport, если использовали JS фреймворк.

Работа с Axios.js:

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

Как можете заметить, у вас есть возможность делать четыре основных запроса к серверу:
GET, POST, PUT, DELETE, всё зависит от метода который будите использовать.

Также в них используется два параметра, первый, это путь, куда отправлять запрос, второй, это JSON массив для данных, ещё есть после метода отправки данных идёт .then(), внутри неё помешается функция которая будет срабатывать, если пришёл успешный ответ без ошибок.

Но если пришла ошибка, и вам надо её обработать, то используете .catch(), в качестве параметра всё также нужно использовать функцию, вот пример.

Примерно так и должна выглядеть идеальная программа с axios.js.

Вы можете настроить запрос, для этого используете axios.create(), например изменить headers.

Таким образом можете поменять заголовок или задать через сколько будет отправляться запрос, после вызова метода.

Axios.js примеры:

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

Сначала сделаем не большую PHP программу.

Тут всё просто, но если что то не понятно, то посмотрите наш учебник по PHP.

Теперь перейдём к самому коду на JavaScript.

Как видите код очень простой, в начале мы берём элементы кнопки и блока в который будем выводить ответ сервера.

Дальше отслеживаем событие клика мыши на кнопку, внутри отправляем GET запрос на сервер, если запрос был удачный, то выводим число на экран, вот результат.

Пример с Axios.js

Всё хорошо работает.

Вывод:

В этой статье вы посмотрели основы работы с axios.js, с примерами, но если вам этого мало, то заходите по ссылки, там полная документация.

Подписываетесь на соц-сети:

Оценка:

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд
Количество оценивших: 2
Средняя оценка: 5,00
Загрузка...

Поделится:

Также рекомендую: