MC, 2025

Uzado de Axios en JavaScript: Kiel facile fari HTTP-petojn?

Se vi laboras kun JavaScript kaj volas facile interagi kun retaj serviloj, tiam Axios estas la ilo por vi! Axios estas populara JavaScript-biblioteko, kiu faciligas faradon de HTTP-petoj al API-oj, legadon de la respondoj kaj prilaboradon de tiuj respondoj. Ĝi estas simpla, efika kaj uzebla en multaj projektoj, de malgrandaj aplikaĵoj ĝis grandaj sistemejoj. En ĉi tiu artikolo, ni esploros kiel uzi Axios en JavaScript kaj montru kelkajn ekzemplojn de ĝia uzo.

Kio estas Axios?

Axios estas promesa-bazita HTTP-kliento por JavaScript, kiu ebligas fari petojn al serviloj en via aplikaĵo. Ĝi estas tre simila al la nativa `fetch()` metodo en JavaScript, sed ĝi havas kelkajn plibonigojn, kiuj faras ĝin pli facila kaj potenca por uzantoj. Axios subtenas ĉiujn bazajn HTTP-petojn, inkluzive de GET, POST, PUT, DELETE kaj pli, kaj ĝi ankaŭ prizorgas la konvertadon de JSON-datumoj aŭtomate.

Kial Uzi Axios?

Laŭ la stato de hodiaŭ, Axios estas preferata por multaj programistoj pro sia facila uzado, aŭtomata serialigo de JSON kaj subteno por eraroj. Ĝi estas ĉefe uzata por:

Facila Interago kun API-oj: Axios ebligas sendi HTTP-petojn facile al serviloj.
Erara Traktado: Axios provizas simplajn manierojn por kapti erarojn kiuj povas okazi dum la HTTP-peto.
Aŭtomata JSON Serio: Axios aŭtomate konvertas la JSON-repondojn al JavaScript-objektoj.

Instali Axios

Antaŭ ol ni komencos, vi devas instali Axios en via projekto. Se vi uzas NPM aŭ Yarn por administri dependecojn, vi povas instali Axios per la sekvaj komandoj:

npm install axios

Se vi uzas Yarn:

yarn add axios

Se vi ne uzas Node.js, vi ankaŭ povas inkluzivi Axios per CDN en via HTML-dosiero. Jen la linio por aldoni al la <head> de via HTML:

Fari Bazajn HTTP-petojn kun Axios

Nun, ni eksciu kiel fari la plej ofte uzatajn HTTP-petojn per Axios.

GET-peto

La plej ofta uzo de Axios estas farado de GET-peto por ricevi datumojn de servilo. Jen ekzemplo:

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

En ĉi tiu ekzemplo, ni faras GET-peton al API por ricevi liston de afiŝoj. Se la peto estas sukcesa, ni montras la datumojn en la konzolo. Se eraro okazas, ni kaptas ĝin kaj montras eraron.

POST-peto

Se vi volas sendi datumojn al servilo, vi povas fari POST-peton. Jen ekzemplo de kiel sendi novan afiŝon:

axios.post('https://jsonplaceholder.typicode.com/posts', {
    title: 'Nova Afiŝo',
    body: 'Ĉi tiu estas nova afiŝo per Axios.',
    userId: 1
})
  .then(function (response) {
    console.log('Respondo:', response.data);
  })
  .catch(function (error) {
    console.log('Eraro okazas:', error);
  });

En ĉi tiu kazo, ni sendas nova afiŝo al la API kun titolo, enhavo kaj uzanto-ID. La servilo respondos kun la nova afiŝo, kaj ni montras ĝin en la konzolo.

PUT-peto

Se vi volas ĝisdatigi ekzistantan datumon, vi povas fari PUT-peton. Jen ekzemplo:

axios.put('https://jsonplaceholder.typicode.com/posts/1', {
    title: 'Ĝisdatigita Titolo',
    body: 'Ĉi tiu estas ĝisdatigita enhavo.',
    userId: 1
})
  .then(function (response) {
    console.log('Respondo:', response.data);
  })
  .catch(function (error) {
    console.log('Eraro okazas:', error);
  });

Ĉi tie ni ĝisdatigas la afiŝon kun ID 1. Ni sendas la novajn valorojn por la titolo kaj enhavo. Se ĉio iras bone, ni ricevas la ĝisdatigitajn datumojn en la respondo.

Erara Traktado kun Axios

Unu el la plej bonaj aspektoj de Axios estas ĝia enkonstruita erara traktado. La Axios-kodo disponigas facilajn manierojn por kaptado de eraroj, kiuj povas okazi dum la HTTP-peto. Ekzemple:

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

Se vi faras peton al neekzistanta URL, Axios kaptos la eraron kaj montras detalojn pri ĝi en la konzolo.

Uzado de Axios kun Async/Await

Se vi volas uzi Axios kun pli moderna maniero de ekzekuto, vi povas uzi `async/await`. Jen ekzemplo:

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

Per `async/await`, la kodo estas pli facila por legi, kaj vi povas trakti asinchronajn operaciojn sen la bezono de `.then()` kaj `.catch()` metodoj.

Konkludo

Uzado de Axios en JavaScript estas simpla kaj potenca maniero fari HTTP-petojn en via aplikacio. Ĝi helpas vin facile komuniki kun retaj serviloj, sendi kaj ricevi datumojn, kaj trakti erarojn sen streĉo. Ĉu vi estas komencanto aŭ sperta programisto, Axios estas ilo, kiun vi devus eklerni por fari viajn aplikaciojn pli efikaj kaj funkciaj. Ni esperas, ke ĉi tiu artikolo donis al vi bonan komprenon pri kiel uzi Axios en viaj projektoj!

Przeczytaj również, bo warto!