В этой статье вы прочитаете про библиотеку axios.js, которая позволяет работать с AJAX, будут примеры.
Также, посмотрите статью: Как работать с AJAX на JQuery, это если вам нужен JQuery.
Подключение Axios.JS:
Первым делом нужно подключить библиотеку, это можно сделать, через терминал или через CDN.
Терминал:
Если вы решите установить через терминал, то тут есть три способа, NPM, Bower и Yarn.
Используя NPM:
1 | npm install axios |
Используя Bower:
1 | bower install axios |
Используя Yarn:
1 | yarn add axios |
Axios.js через CDN:
Если вы хотите через CDN, то для этого просто подключите скрипт в <head>.
1 | <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> |
Дальше в коде подключаем через require или inport, если использовали JS фреймворк.
Работа с Axios.js:
Для того что бы работать с этой библиотекой, нужно запомнить несколько самых главных команд.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | // Get запрос axios.get('/path').then(res => { console.log(res); // Результат ответа от сервера }); // Post запрос axios.post('/path', {"Name": "Vova"}).then(res => { console.log(res); // Результат ответа от сервера }); // Put запрос axios.put('/path', {"Name": "Vova"}).then(res => { console.log(res); // Результат ответа от сервера }); // Delete запрос axios.delete('/path', {"Name": "Vova"}).then(res => { console.log(res); // Результат ответа от сервера }); |
Как можете заметить, у вас есть возможность делать четыре основных запроса к серверу:
GET, POST, PUT, DELETE, всё зависит от метода который будите использовать.
Также в них используется два параметра, первый, это путь, куда отправлять запрос, второй, это JSON массив для данных, ещё есть после метода отправки данных идёт .then(), внутри неё помешается функция которая будет срабатывать, если пришёл успешный ответ без ошибок.
Но если пришла ошибка, и вам надо её обработать, то используете .catch(), в качестве параметра всё также нужно использовать функцию, вот пример.
1 2 3 4 5 6 7 8 9 10 11 12 13 | // Отправка POST запроса axios.post('/user', { firstName: 'Fred', // Имя lastName: 'Flintstone' // Фамилия }) // Если запрос успешен .then(function (response) { console.log(response); }) // Если запрос с ошибкой .catch(function (error) { console.log(error); }); |
Примерно так и должна выглядеть идеальная программа с axios.js.
Вы можете настроить запрос, для этого используете axios.create(), например изменить headers.
1 2 3 4 5 6 7 8 | // Создаём настройки для запроса const instance = axios.create({ timeout: 1000, // Через сколько отправлять запрос headers: {'X-Custom-Header': 'foobar'} // Заголовок запроса }); // Отправка GET запроса instance.get("/user") |
Таким образом можете поменять заголовок или задать через сколько будет отправляться запрос, после вызова метода.
Axios.js примеры:
Теперь покажу один не большой пример, будем отправлять запрос на сервер, в качестве ответа возвышается случайное число, его выводим на экран.
Сначала сделаем не большую PHP программу.
1 2 3 4 | if ($_GET["req"]) { header('Content-Type: application/json'); print json_encode(array('data' => rand(0, 10))); } |
Тут всё просто, но если что то не понятно, то посмотрите наш учебник по PHP.
Теперь перейдём к самому коду на JavaScript.
1 2 3 4 5 6 7 8 9 10 11 12 13 | // Получаем элемент кнопки let btn = document.getElementById("btn"); // Получение элемента для вывода результата let resElement = document.getElementById("res") // Отслеживание события мыши btn.addEventListener("click", () => { // Отправка GET запроса axios.get("/ajax.php?req=true").then(res => { // Вывод на экран ответа сервера resElement.innerHTML = res.data.data; }) }) |
Как видите код очень простой, в начале мы берём элементы кнопки и блока в который будем выводить ответ сервера.
Дальше отслеживаем событие клика мыши на кнопку, внутри отправляем GET запрос на сервер, если запрос был удачный, то выводим число на экран, вот результат.
Всё хорошо работает.
Вывод:
В этой статье вы посмотрели основы работы с axios.js, с примерами, но если вам этого мало, то заходите по ссылки, там полная документация.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 5,00
Загрузка...