Pilnīga rokasgrāmata darbam ar Axios

Axios ir JavaScript bibliotēka, kas nodrošina vienkāršu API HTTP pieprasījumu nosūtīšanai no klienta puses JavaScript koda vai servera puses Node.js koda. Axios pamatā ir JavaScript Promise API, kas padara asinhrono kodu vieglāk uzturējamu.

Darba sākšana ar Axios

Varat izmantot Axios savā lietotnē, izmantojot satura piegādes tīklu (CDN) vai instalējot to savā projektā.

Lai izmantotu Axios tieši HTML, kopējiet tālāk esošo CDN saiti un ievietojiet to HTML faila galvas sadaļā:

<skriptssrc=" https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">skripts>

Izmantojot šo pieeju, varat izmantot Axios un tās HTTP metodes HTML skriptu pamattekstā. Axios var arī patērē REST API tādā sistēmā kā React.

Lai izmantotu Axios projektā Node.js, instalējiet to savā projekta direktorijā, izmantojot npm vai yarn pakotņu pārvaldnieku:

npm instalēt axios
# vai
dzija pievienot axios

Pēc instalēšanas varat sākt lietot Axios savā JavaScript projektā:

konst axios = pieprasīt("aksios");

Šajā rokasgrāmatā jūs strādāsit ar bezmaksas JSONPlaceholder API. Lai gan šai API ir resursu kopa, jūs izmantosit tikai /comments un /posts galapunktiem. Galapunkti ir konkrēti URL, kuriem var piekļūt, lai izgūtu vai apstrādātu datus.

GET pieprasījumu veikšana, izmantojot Axios

Ir vairāki veidi, kā veikt GET pieprasījumu, izmantojot Axios. Tomēr sintakse parasti ir atkarīga no izvēles.

Viens no veidiem, kā veikt GET pieprasījumu, ir izmantot axios() metode ar objektu, kas norāda pieprasījuma metodi kā gūt un URL, uz kuru nosūtīt pieprasījumu.

Piemēram:

konst axios = pieprasīt("aksios");
axios({
 metode: "gūt",
 url: " https://jsonplaceholder.typicode.com/comments",
})
 .hen((res) => {
konsole.log (res.data);
 })
 .catch((kļūda) => {
konsole.error (err);
 });

Šis piemērs rada solījums, izmantojot asinhronās programmēšanas modeli savienojot ķēdi .tad() un .catch() metodes. Solījums reģistrē atbildi konsolei, kad pieprasījums ir veiksmīgs, un reģistrē kļūdas ziņojumu, ja pieprasījums neizdodas.

Axios nodrošina arī vienkāršāku veidu, kā veikt GET pieprasījumus, kas novērš nepieciešamību nodot objektu, savienojot to .gūt() metode uz axios piemēram.

Piemēram:

axios
 .gūt(" https://jsonplaceholder.typicode.com/comments")
 .hen((res) => {
konsole.log (res.data);
 })
 .catch((kļūda) => {
konsole.error (err);
 });

POST pieprasījumu veikšana, izmantojot Axios

POST pieprasījuma veikšana, izmantojot Axios, ir līdzīga GET pieprasījuma veikšanai. Izmantojot šo pieprasījumu, varat nosūtīt datus uz serveri.

Tālāk sniegtais koda fragments ir piemērs, kā izmantot Axios .post() metode:

axios
 .post(" https://jsonplaceholder.typicode.com/comments", {
 nosaukums: "Džeksons Smits",
 e-pasts: "[email protected]",
 korpuss: "Tas ir mākslas darbs.",
 })
 .hen((res) => {
konsole.log (res.data);
 })
 .catch((kļūda) => {
konsole.error (err);
 });

Kods veic POST pieprasījumu JSONPlaceholder API, lai izveidotu jaunu komentāru. The axios.post metode nosūta datus uz /comments galapunkts.

Pieprasījumā nosūtītie dati ir objekts ar a nosaukums, e-pasts, un ķermeni īpašums. Ja pieprasījums ir veiksmīgs, tad metode reģistrē atbildes datus konsolē. Un, ja ir kļūda, noķert metode reģistrē kļūdu konsolē.

PUT/PATCH pieprasījumu veikšana ar Axios

Varat izmantot pieprasījumu PUT vai PATCH, lai atjauninātu serverī esošu resursu. Kamēr PUT aizstāj visu resursu, PATCH atjaunina tikai norādītos laukus.

Lai veiktu PUT vai PATCH pieprasījumu ar Axios, jums ir jāizmanto .put() vai .ielāps () metodes.

Šeit ir piemērs, kā izmantot šīs metodes, lai atjauninātu e-pasts komentāra rekvizīts ar id 100:

konst axios = pieprasīt("aksios");
axios
 .gūt(" https://jsonplaceholder.typicode.com/comments/100")
 .hen((res) => {
konsole.log (res.data.email);
 })
 .catch((kļūda) => {
konsole.error (err);
 });
// Izvade:
// '[email protected]'
axios
 .patch(" https://jsonplaceholder.typicode.com/comments/100", {
 e-pasts: "[email protected]",
 })
 .hen((res) => {
konsole.log (res.data.email);
 })
 .catch((kļūda) => {
konsole.error (err);
 });
// Izvade:
// '[email protected]',

Šī programma vispirms veic GET pieprasījumu galapunktam " https://jsonplaceholder.typicode.com/comments/100". Pēc tam tas reģistrē e-pasts komentāra īpašums ar ID 100 uz konsoli. Mēs veicam GET pieprasījumu, lai jūs varētu redzēt, kas mainījās pēc PATCH pieprasījuma veikšanas.

Otrais pieprasījums ir PATCH pieprasījums tam pašam galapunktam. Šis kods atjaunina komentāra e-pastu uz [email protected].

DZĒŠANAS pieprasījumu veikšana, izmantojot Axios

Jūs varat izmantot DZĒST pieprasījums dzēst resursu serverī.

Ņemiet tālāk redzamo piemēru, kā lietot .delete() metode resursu dzēšanai no servera:

axios
 .delete(" https://jsonplaceholder.typicode.com/comments/10")
 .hen((res) => {
konsole.log (res.data);
 })
 .catch((kļūda) => {
konsole.error (err);
 });
//Output:
// {}

Reģistrējot konsolē tukšu objektu, iepriekš minētais kods parāda, ka tas izdzēsa komentāru ar ID 10.

Vienlaicīgu pieprasījumu veikšana ar Axios

Izmantojot Axios, varat iegūt datus no vairākiem galapunktiem vienlaikus. Lai to izdarītu, jums ir jāizmanto .all() metodi. Šī metode kā parametru pieņem pieprasījumu masīvu un tiek atrisināta tikai tad, kad saņemat visas atbildes.

Nākamajā piemērā .all() metode izgūst datus no diviem galapunktiem vienlaikus:

axios
 .all([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _limit=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _limit=2"),
 ])
 .hen(
 axios.spread((komentāri, ziņas) => {
konsole.log (comments.data);
konsole.log (posts.data);
 })
 )
 .catch((kļūda) =>konsole.error (err));

Iepriekš minētais koda bloks vienlaikus nosūta pieprasījumus un pēc tam nosūta atbildes uz .tad() metodi. Axios's .izplatība() metode atdala atbildes un piešķir katru atbildi savam mainīgajam.

Visbeidzot, konsole reģistrē datus divu atbilžu īpašums: komentāri un ziņas.

Pieprasījumu pārtveršana ar Axios

Dažreiz jums var būt nepieciešams pārtvert pieprasījumu, pirms tas nonāk serverī. Jūs varat izmantot Axios interceptors.request.use() pieprasījumu pārtveršanas metode.

Nākamajā piemērā metode reģistrē pieprasījuma veidu konsolē katram veiktajam pieprasījumam:

axios.interceptors.request.use(
 (konfigurācija) => {
konsole.log(`${config.method} izteikts pieprasījums”.);
atgriezties konfigurācija;
 },
 (kļūda) => {
atgrieztiesApsolīt.noraidīt (kļūda);
 }
);
axios
 .gūt(" https://jsonplaceholder.typicode.com/comments? _limit=2")
 .hen((res) =>konsole.log (res.data))
 .catch((kļūda) =>konsole.error (err));

Programma definē Axios pārtvērēju, izmantojot axios.interceptors.request.use metodi. Šī metode aizņem konfigurācija un kļūda objekti kā argumenti. The konfigurācija objekts satur informāciju par pieprasījumu, ieskaitot pieprasījuma metodi (config.method) un pieprasījuma URL (config.url).

Pārtvērēja funkcija atgriež konfigurācija iebilst, ļaujot pieprasījumam normāli turpināties. Ja ir kļūda, funkcija atgriež noraidīto Apsolīt objektu.

Visbeidzot, programma pieprasa pārbaudīt pārtvērēju. Konsole reģistrēs veiktā pieprasījuma veidu, šajā gadījumā GET pieprasījumu.

Axios ir vairāk

Jūs uzzinājāt, kā savos projektos veikt un pārtvert pieprasījumus, izmantojot Axios. Jums kā JavaScript izstrādātājam ir pieejamas daudzas citas funkcijas, piemēram, pieprasījumu pārveidošana un Axios gadījumu izmantošana. Axios joprojām ir vēlamā opcija HTTP pieprasījumu veikšanai jūsu JavaScript lietojumprogrammās. Tomēr Fetch API ir vēl viena laba iespēja, ko varat izpētīt.