Using Axios in JavaScript: Simplifying API Requests

Axios yra populiarus JavaScript biblioteka, kuri leidžia lengvai atlikti HTTP užklausas. Tai yra puikus įrankis, skirtas dirbti su REST API ir kitomis interneto paslaugomis. Šiame straipsnyje mes paaiškinsime, kaip naudoti Axios JavaScript programose ir kaip ji gali palengvinti jūsų darbą. Jei dar nesate susipažinę su Axios, nesijaudinkite – mes paaiškinsime viską nuo pagrindų!

Kas yra Axios?

Axios yra pažangi JavaScript biblioteka, leidžianti atlikti asinchronines HTTP užklausas. Tai padeda lengvai pasiekti duomenis iš serverių, naudoti įvairius API ir tvarkyti duomenų gavimo procesus. Axios palaiko "Promise" API, todėl užklausos gali būti lengvai tvarkomos naudojant async ir await žymėjimus.

Axios veikia tiek naršyklėje, tiek Node.js aplinkoje, todėl tai universalus įrankis tiek serverių, tiek kliento pusės programoms. Ši biblioteka labai palengvina darbą su HTTP užklausomis, nes siūlo paprastą, tačiau galingą API.

Kaip įdiegti Axios?

Norėdami pradėti naudoti Axios, pirmiausia turite įdiegti šią biblioteką į savo projektą. Jei naudojate npm (Node Package Manager), galite įdiegti Axios šiuo komandu:

npm install axios

Jei dirbate su „front-end“ JavaScript ir norite įtraukti Axios tiesiai į HTML failą, galite pridėti šį CDN nuorodą prie savo HTML dokumento:

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

Štai ir viskas! Dabar galite pradėti naudoti Axios savo projekte.

Kaip atlikti pagrindines HTTP užklausas su Axios?

Axios leidžia atlikti įvairias HTTP užklausas, tokias kaip GET, POST, PUT ir DELETE. Pažvelkime į pagrindines užklausas, kurias galite atlikti naudodami Axios.

GET užklausa su Axios

GET užklausa yra dažniausiai naudojama užklausa, kai norime gauti duomenis iš serverio. Štai paprastas pavyzdys:

axios.get('https://jsonplaceholder.typicode.com/posts')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log('Klaida: ', error);
  });

Šis kodas siunčia GET užklausą į https://jsonplaceholder.typicode.com/posts ir, jei užklausa pavyksta, išveda gautus duomenis į konsolę. Jei užklausa nepavyksta, bus išvedama klaida.

POST užklausa su Axios

Naudodami POST užklausas, galite siųsti duomenis į serverį. Štai kaip tai galima padaryti:

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'Pavadinimas',
    body: 'Turinys',
    userId: 1
  })
  .then(function (response) {
    console.log('Atsakymas:', response.data);
  })
  .catch(function (error) {
    console.log('Klaida: ', error);
  });

Šis kodas siunčia POST užklausą su duomenimis (pavadinimu, turiniu ir vartotojo ID) į serverį. Jei užklausa sėkminga, į konsolę bus išvedami gauti duomenys.

PUT užklausa su Axios

Jei norite atnaujinti esamus duomenis, galite naudoti PUT užklausą. Pavyzdžiui:

axios.put('https://jsonplaceholder.typicode.com/posts/1', {
    title: 'Atnaujintas Pavadinimas',
    body: 'Atnaujintas Turinys',
    userId: 1
  })
  .then(function (response) {
    console.log('Atnaujinta:', response.data);
  })
  .catch(function (error) {
    console.log('Klaida: ', error);
  });

Ši užklausa atnaujins pirmąjį įrašą pagal nurodytą ID su naujais duomenimis.

DELETE užklausa su Axios

Jei norite ištrinti duomenis iš serverio, galite naudoti DELETE užklausą:

axios.delete('https://jsonplaceholder.typicode.com/posts/1')
  .then(function (response) {
    console.log('Ištrinta:', response.data);
  })
  .catch(function (error) {
    console.log('Klaida: ', error);
  });

Ši užklausa ištrins pirmąjį įrašą pagal nurodytą ID.

Kaip naudoti Axios su asinchroniniais funkcijomis?

Axios puikiai veikia su async ir await žymėjimais, todėl galite atlikti asinchronines užklausas ir valdyti jų rezultatus lengvai. Štai kaip galite atlikti GET užklausą naudojant asinchroninį funkcijų rašymą:

async function getData() {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response.data);
  } catch (error) {
    console.log('Klaida: ', error);
  }
}

getData();

Ši funkcija siunčia užklausą ir laukia atsakymo, kol jis atvyks. Jei užklausa sėkminga, duomenys bus išvedami į konsolę, o jei įvyksta klaida, ji bus sugauta ir išvedama.

Kodų optimizavimas ir klaidų valdymas

Vienas iš svarbiausių aspektų naudojant Axios yra klaidų valdymas. Dažnai gali pasitaikyti, kad serveris nepasiekia, duomenys neatitinka lūkesčių arba atsakymas užtrunka ilgiau nei tikėtasi. Axios turi puikų mechanizmą klaidų tvarkymui su .catch() ir try/catch blokais.

Axios konfigūracija ir papildomos funkcijos

Axios suteikia daugybę papildomų konfigūracijos galimybių, kad galėtumėte tiksliai pritaikyti užklausas. Pavyzdžiui, galite nustatyti užklausos laiką, antraštes arba duomenų tipą, kurį siunčiate. Štai pavyzdys:

axios({
  method: 'get',
  url: 'https://jsonplaceholder.typicode.com/posts',
  headers: {
    'Authorization': 'Bearer TOKEN'
  },
  timeout: 5000
})
  .then(response => console.log(response))
  .catch(error => console.log(error));

Ši konfigūracija nustato, kad užklausa bus siunčiama su papildomu "Authorization" antrašte ir užtruks ne ilgiau nei 5 sekundes.

Išvada

Axios yra puikus įrankis dirbant su HTTP užklausomis JavaScript. Jis padeda paprastai ir greitai atlikti įvairias užklausas, tokias kaip GET, POST, PUT ir DELETE, ir tvarkyti atsakymus ar klaidas. Naudojant asinchroninius metodus su async/await žymėjimais, Axios tampa dar galingesnis ir lengvai integruojamas į jūsų JavaScript programas. Jei dar nesate bandę Axios, tai tikrai verta išbandyti!