Axios е много предпочитана опция за изпълнение на HTTP заявки в JavaScript. Научете как да го направите ефективно с помощта на това изчерпателно ръководство.

Axios е JavaScript библиотека, която предоставя прост API за изпращане на HTTP заявки от клиентски JavaScript код или сървърен Node.js код. Axios е изграден върху Promise API на JavaScript, което прави асинхронния код по-лесен за поддръжка.

Първи стъпки с Axios

Можете да използвате Axios в приложението си, като използвате мрежа за доставка на съдържание (CDN) или като го инсталирате във вашия проект.

За да използвате Axios директно в HTML, копирайте CDN връзката по-долу и я вмъкнете в главния раздел на вашия HTML файл:

<сценарийsrc=" https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">сценарий>

С този подход можете да използвате Axios и неговите HTTP методи в тялото на вашите HTML скриптове. Axios също може консумират REST API в рамка като React.

За да използвате Axios в проект на Node.js, инсталирайте го в директорията на вашия проект, като използвате или npm, или yarn мениджъра на пакети:

instagram viewer 
npm инсталирайте axios
# или
прежда добавете аксиос

След инсталирането можете да започнете да използвате Axios във вашия JavaScript проект:

конст аксиос = изискват("аксиос");

Покрай това ръководство ще работите с безплатните JSON Placeholder API. Докато този API има набор от ресурси, вие ще използвате само /comments и /posts крайни точки. Крайните точки са специфични URL адреси, които могат да бъдат достъпни за извличане или манипулиране на данни.

Правене на GET заявки с Axios

Има няколко начина да направите GET заявка с помощта на Axios. Синтаксисът обаче обикновено зависи от предпочитанията.

Един от начините да направите GET заявка е като използвате аксиос() метод с обект, който указва метода на заявката като получавам и URL адреса, до който да изпратите заявката.

Например:

конст аксиос = изискват("аксиос");
axios({
 метод: "получи",
 URL адрес: " https://jsonplaceholder.typicode.com/comments",
})
 .тогава((рез) => {
конзола.log (res.data);
 })
 .catch((грешка) => {
конзола.грешка (грешка);
 });

Този пример създава обещание, използващо модела на асинхронно програмиране като оковете .тогава() и .catch() методи. Обещанието регистрира отговора към конзолата, когато заявката е успешна, и регистрира съобщението за грешка, ако заявката е неуспешна.

Axios също така предоставя по-лесен начин за правене на GET заявки, които премахват необходимостта от предаване на обект чрез свързване на .get() метод към аксиос инстанция.

Например:

аксиос
 .get(" https://jsonplaceholder.typicode.com/comments")
 .тогава((рез) => {
конзола.log (res.data);
 })
 .catch((грешка) => {
конзола.грешка (грешка);
 });

Правене на POST заявки с Axios

Правенето на POST заявка с Axios е подобно на GET заявка. Можете да изпращате данни към сървър, като използвате тази заявка.

Кодовият фрагмент по-долу е пример за това как да използвате Axios .post() метод:

аксиос
 .post(" https://jsonplaceholder.typicode.com/comments", {
 име: "Джаксън Смит",
 електронна поща: "[email protected]",
 тяло: "Това е произведение на изкуството.",
 })
 .тогава((рез) => {
конзола.log (res.data);
 })
 .catch((грешка) => {
конзола.грешка (грешка);
 });

Кодът прави POST заявка към JSONPlaceholder API, за да създаде нов коментар. The axios.post методът изпраща данни до /comments крайна точка.

Изпратените в заявката данни са обект с a име, електронна поща, и тяло Имот. Ако заявката е успешна, тогава метод регистрира данните за отговора в конзолата. И ако има грешка, улов метод записва грешката в конзолата.

Правене на PUT/PATCH заявки с Axios

Можете да използвате заявката PUT или PATCH, за да актуализирате съществуващ ресурс на сървъра. Докато PUT замества целия ресурс, PATCH актуализира само посочените полета.

За да направите PUT или PATCH заявка с Axios, трябва да използвате .слагам() или .кръпка () методи съответно.

Ето пример как да използвате тези методи за актуализиране на електронна поща свойство на коментара с идентификатор 100:

конст аксиос = изискват("аксиос");
аксиос
 .get(" https://jsonplaceholder.typicode.com/comments/100")
 .тогава((рез) => {
конзола.log (res.data.email);
 })
 .catch((грешка) => {
конзола.грешка (грешка);
 });


// Изход:
// '[email protected]'


аксиос
 .patch(" https://jsonplaceholder.typicode.com/comments/100", {
 електронна поща: "[email protected]",
 })
 .тогава((рез) => {
конзола.log (res.data.email);
 })
 .catch((грешка) => {
конзола.грешка (грешка);
 });
// Изход:
// '[email protected]',

Тази програма първо прави GET заявка до крайната точка " https://jsonplaceholder.typicode.com/comments/100". След това регистрира електронна поща собственост на коментара с идентификатор на 100 към конзолата. Ние правим GET заявка, за да можете да видите какво се е променило след извършване на PATCH заявката.

Втората заявка е PATCH заявка към същата крайна точка. Този код актуализира имейла на коментара до [email protected].

Правене на заявки за ИЗТРИВАНЕ с Axios

Можете да използвате ИЗТРИЙ заявка за изтриване на ресурс на сървъра.

Вземете следния пример за това как да използвате .Изтрий() метод за изтриване на ресурс от сървъра:

аксиос
 .Изтрий(" https://jsonplaceholder.typicode.com/comments/10")
 .тогава((рез) => {
конзола.log (res.data);
 })
 .catch((грешка) => {
конзола.грешка (грешка);
 });
//Output:
// {}

Като регистрира празен обект в конзолата, горният код показва, че е изтрил коментара с ID 10.

Правене на едновременни заявки с Axios

Можете да извличате данни от множество крайни точки наведнъж с помощта на Axios. За да направите това, трябва да използвате .всичко() метод. Този метод приема масив от заявки като свой параметър и разрешава само когато получите всички отговори.

В следващия пример, .всичко() методът извлича данни от две крайни точки едновременно:

аксиос
 .всичко([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _limit=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _limit=2"),
 ])
 .тогава(
 axios.spread((коментари, публикации) => {
конзола.log (comments.data);
конзола.log (posts.data);
 })
 )
 .catch((грешка) =>конзола.грешка (грешка));

Горният кодов блок изпраща заявки едновременно и след това предава отговорите на .тогава() метод. На Аксиос .разпространение() метод разделя отговорите и присвоява всеки отговор на неговата променлива.

Накрая конзолата регистрира данни свойство на двата отговора: коментари и публикации.

Прихващане на заявки с Axios

Понякога може да се наложи да прихванете заявка, преди да стигне до сървъра. Можете да използвате Axios' interceptors.request.use() метод за прихващане на заявки.

В следния пример методът регистрира типа заявка към конзолата за всяка направена заявка:

axios.interceptors.request.use(
 (конфигурация) => {
конзола.log(`${config.method} направена заявка`);
връщане конфигурация;
 },
 (грешка) => {
връщанеобещание.отхвърляне (грешка);
 }
);
аксиос
 .get(" https://jsonplaceholder.typicode.com/comments? _limit=2")
 .тогава((рез) =>конзола.log (res.data))
 .catch((грешка) =>конзола.грешка (грешка));

Програмата дефинира прехващач на Axios, използвайки axios.interceptors.request.use метод. Този метод отнема конфиг и грешка обекти като аргументи. The конфиг обектът съдържа информация за заявката, включително метода на заявката (config.method) и URL адреса на заявката (config.url).

Функцията за прихващане връща конфиг обект, което позволява заявката да продължи нормално. Ако има грешка, функцията връща отхвърленото обещание обект.

Накрая програмата прави заявка за тестване на прихващача. Конзолата ще регистрира вида на направената заявка, в този случай GET заявка.

Има още нещо в Axios

Научихте как да правите и прихващате заявки във вашите проекти с помощта на Axios. Много други функции, като трансформиране на заявки и използване на екземпляри на Axios, са достъпни за вас като разработчик на JavaScript, за да ги изследвате. Axios остава предпочитана опция за правене на HTTP заявки във вашите JavaScript приложения. Въпреки това, Fetch API е друга добра опция, която можете да проучите.