Что такое Аксиос
Axios — это популярная библиотека JavaScript, которая предоставляет простой и эффективный способ выполнения HTTP-запросов из веб-браузеров или приложений Node.js. Он служит HTTP-клиентом на стороне клиента и широко используется для отправки асинхронных HTTP-запросов на сервер и обработки ответов.
Вот почему Axios.js так широко используется и что он предлагает:
Простота использования. Axios.js предоставляет простой и интуитивно понятный API для создания HTTP-запросов. Он поддерживает различные методы запросов, такие как GET, POST, PUT, DELETE и другие, что упрощает взаимодействие с RESTful API или другими веб-сервисами.
На основе промисов.Axios.js построен на промисах JavaScript, которые обеспечивают элегантную обработку асинхронных операций. Он возвращает промисы для запросов, позволяя вам использовать такие методы, как async/await или методы chainable .then() и .catch() для обработки ответов.
Поддержка браузера и Node.js. Axios.js разработан для бесперебойной работы как в веб-браузерах, так и в средах Node.js. Эта гибкость позволяет разработчикам использовать один и тот же код и API для выполнения HTTP-запросов на разных платформах.
Обработка ошибок. Axios.js включает комплексные возможности обработки ошибок. Он автоматически обнаруживает ошибки HTTP (коды состояния в диапазоне 4xx или 5xx) и отклоняет обещание, что позволяет легко обрабатывать ошибки.
Перехватчики. Axios.js предоставляет перехватчики, которые позволяют глобально перехватывать и изменять запросы или ответы. Перехватчики эффективны для таких задач, как добавление заголовков, обработка аутентификации или обработка распространенных ошибок на централизованном уровне.
Отмена запросов. Axios.js позволяет отменять запросы с помощью токенов отмены. Эта функция полезна, когда вам нужно прервать текущий запрос или отменить несколько запросов одновременно.
Отслеживание выполнения. Axios.js поддерживает отслеживание выполнения запросов, связанных с загрузкой файлов или передачей больших объемов данных. Он предоставляет события прогресса, которые можно использовать для отслеживания хода загрузки или скачивания и отображения его пользователю.
Чтобы использовать Axios.js в коде JavaScript, выполните следующие действия:
- Axios.js можно установить через npm или yarn. Откройте терминал и выполните следующую команду:
npm install axios // using npm yarn add axios // using yarn
2. Импортируйте Axios. В файле JavaScript импортируйте Axios, используя оператор require или import:
// Using require
const axios = require('axios');
// Using import
import axios from 'axios';
3. Создание запроса GET. Чтобы сделать запрос GET на сервер, используйте метод axios.get(). Укажите URL-адрес, на который вы хотите отправить запрос, в качестве аргумента:
axios.get('https://dummyjson.com/carts')
.then(response => {
// Handle the response data
console.log(response.data);
})
.catch(error => {
// Handle any errors
console.error(error);
});
4. Создание других типов запросов: Axios поддерживает различные методы HTTP-запросов, такие как POST, PUT, DELETE и т. д. Вы можете использовать соответствующие методы (axios.post(), axios.put(), axios.delete()) и указывать URL-адрес и данные в качестве аргументов. Например:
// POST request
axios.post('https://api.example.com/data', { name: 'John', age: 25 })
.then(response => {
// Handle the response
console.log(response.data);
})
.catch(error => {
// Handle any errors
console.error(error);
});
5- Настройка запросов: Axios позволяет настраивать запросы, предоставляя дополнительные параметры конфигурации. Например, вы можете установить заголовки, отправить данные запроса в разных форматах (JSON, данные формы и т. д.) и многое другое. Вот пример:
axios.post('https://api.example.com/data', { name: 'John', age: 25 }, {
headers: { 'Content-Type': 'application/json' },
})
.then(response => {
// Handle the response
console.log(response.data);
})
.catch(error => {
// Handle any errors
console.error(error);
});
Как нам Interceptors в axios
Перехватчики в Axios.js позволяют вам перехватывать и изменять HTTP-запросы или ответы глобально до того, как они будут обработаны вашим приложением.
Чтобы использовать перехватчики в Axios.js, выполните следующие действия:
- Перехватчики запросов: перехватчики запросов используются для изменения или обработки запросов до их отправки. Вы можете добавить перехватчик запросов, используя метод axios.interceptors.request.use(). Вот пример:
// Add a request interceptor
axios.interceptors.request.use(
config => {
// Modify the request config
config.headers.Authorization = 'Bearer your_token_here';
return config;
},
error => {
// Handle the request error
return Promise.reject(error);
}
);
В приведенном выше примере перехватчик запросов добавляет заголовок авторизации к каждому исходящему запросу, изменяя конфигурацию запроса (config).
это очень полезно, когда у вас есть много запросов для обработки, вы можете добавить заголовок авторизации к каждому из них. вот пример того, как я использую его в одном из моих проектов:
import axios from 'axios';
import secureLocalStorage from 'react-secure-storage';
const API = axios.create({ baseURL: 'https://localhost:5000' })
// intercept requests before they are handled by then or catch
API.interceptors.request.use((req)=> {
if(secureLocalStorage.getItem('token')) {
req.headers.authorization = `Bearer ${secureLocalStorage.getItem('token')}`
}
return req ;
})
export const fetchRooms = (userId) => API.get(`/rooms/${userId}`);
export const fetchRoom = (id) => API.get(`/rooms/getRoom/${id}`);
export const fetchRoomsBySearch = (SearchQuery) => API.get(`/rooms/getRooms/search?searchQuery=${SearchQuery.search || 'none'}&tags=${SearchQuery.tags}&userId=${SearchQuery.userId}&isProfesseur=${SearchQuery.isProfesseur}`);
export const createRoom = (formData) => API.post('/rooms/createRoom', formData);
export const joinRoom = (formData) => API.post('/rooms/rejoindre', formData);
export const updateCour = (id, updatedCour) => API.patch(`/cours/${id}`, updatedCour);
export const addChapitre = (formData) => API.post(`/rooms/addChapitre`, formData);
export const fetchChapitre = (id) => API.get(`/chapitres/${id}`);
export const deleteChapitre = (data) => API.post(`/chapitres/delete`, data);
export const updateChapitre = (data) => API.patch(`/chapitres/update`, data);
export const consultChapitreByEtudiant = (data) => API.post(`/rooms/consulter`, data);
export const deleteEtudiants = (data) => API.post(`/rooms/deleteEtudiants`, data);
export const askfor_new_codeRoom = (idRoom) => API.patch(`/rooms/askfor_new_codeRoom`, idRoom);
export const updateTheme = (data) => API.put(`/cours/updateTheme`, data);
export const fetchThemes = () => API.get(`/cours/all/themes`);
export const addComment = (data) => API.post(`/rooms/addComment`,data);
export const getComments = (id) => API.get(`/rooms/getComments/${id}`);
export const deleteComment = (id) => API.delete(`/rooms/deleteComment/${id}`);
export const deleteComments_ByIdChapitre = (id) => API.delete(`/rooms/deleteComments/${id}`);
export const signIn = (formData) => API.post(`/users/signin`, formData);
export const signUp = (formData) => API.post(`/users/signup`, formData);
Если вам интересно, вы можете ознакомиться с полным кодом проекта здесь.
2. Перехватчики ответов. Перехватчики ответов используются для изменения или обработки ответов до того, как они будут переданы вашему приложению. Вы можете добавить перехватчик ответа, используя метод axios.interceptors.response.use(). Вот пример:
// Add a response interceptor
axios.interceptors.response.use(
response => {
// Modify the response data
response.data = response.data.results;
return response;
},
error => {
// Handle the response error
return Promise.reject(error);
}
);
В приведенном выше примере перехватчик ответа изменяет данные ответа, извлекая свойство results из объекта ответа перед передачей его вашему приложению.
Заключение:
Axios.js завоевал популярность в экосистеме JavaScript благодаря своей простоте, универсальности и широкому набору функций. Он стал предпочтительным выбором для многих разработчиков, когда дело доходит до выполнения HTTP-запросов в приложениях JavaScript.
