Išsamus darbo su „Axios“ vadovas

„Axios“ yra „JavaScript“ biblioteka, teikianti paprastą API HTTP užklausoms siųsti iš kliento pusės JavaScript kodo arba serverio pusės Node.js kodo. „Axios“ sukurta remiantis „JavaScript“ „Promise“ API, todėl asinchroninį kodą lengviau prižiūrėti.

Darbo su Axios pradžia

Galite naudoti „Axios“ savo programoje naudodami turinio pristatymo tinklą (CDN) arba įdiegę jį savo projekte.

Norėdami naudoti „Axios“ tiesiogiai HTML, nukopijuokite toliau pateiktą CDN nuorodą ir įterpkite ją į HTML failo antraštę:

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

Taikydami šį metodą galite naudoti „Axios“ ir jo HTTP metodai HTML scenarijų tekste. Axios taip pat gali naudoti REST API tokioje sistemoje kaip „React“..

Norėdami naudoti „Axios“ Node.js projekte, įdiekite jį savo projekto kataloge naudodami npm arba yarn paketų tvarkyklę:

npm įdiegti axios
# arba
verpalai pridėti axios

Įdiegę galite pradėti naudoti „Axios“ savo „JavaScript“ projekte:

konst axios = reikalauti("aksios");

Kartu su šiuo vadovu dirbsite su nemokama JSONPlaceholder API. Nors ši API turi išteklių rinkinį, naudosite tik /comments ir /posts galutiniai taškai. Galiniai taškai yra konkretūs URL adresai, kuriuos galima pasiekti norint gauti arba valdyti duomenis.

GET užklausų teikimas naudojant „Axios“.

Yra keletas būdų, kaip pateikti GET užklausą naudojant „Axios“. Tačiau sintaksė paprastai priklauso nuo pageidavimų.

Vienas iš būdų pateikti GET užklausą yra naudoti axios () metodas su objektu, kuris nurodo užklausos metodą kaip gauti ir URL, į kurį reikia siųsti užklausą.

Pavyzdžiui:

konst axios = reikalauti("aksios");
axios({
 metodas: "gauti",
 url: " https://jsonplaceholder.typicode.com/comments",
})
 .thena((res) => {
konsolė.log (res.data);
 })
 .catch((klysti) => {
konsolė.error (err);
 });

Šis pavyzdys sukuria pažadas naudojant asinchroninio programavimo modelį sujungiant grandine .tada () ir .catch() metodus. Pažadas užregistruoja atsakymą konsolėje, kai užklausa yra sėkminga, ir registruoja klaidos pranešimą, jei užklausa nepavyksta.

„Axios“ taip pat suteikia lengvesnį būdą pateikti GET užklausas, kurios pašalina poreikį perduoti objektą sujungiant grandinę .get() metodas prie aksios instancija.

Pavyzdžiui:

aksios
 .get(" https://jsonplaceholder.typicode.com/comments")
 .thena((res) => {
konsolė.log (res.data);
 })
 .catch((klysti) => {
konsolė.error (err);
 });

POST užklausų teikimas naudojant „Axios“.

POST užklausos pateikimas naudojant Axios yra panašus į GET užklausos pateikimą. Naudodamiesi šia užklausa galite siųsti duomenis į serverį.

Toliau pateiktas kodo fragmentas yra pavyzdys, kaip naudoti „Axios“ .post() metodas:

aksios
 .post(" https://jsonplaceholder.typicode.com/comments", {
 vardas: "Džeksonas Smitas",
 paštas: "[email protected]",
 kūnas: "Tai yra meno kūrinys.",
 })
 .thena((res) => {
konsolė.log (res.data);
 })
 .catch((klysti) => {
konsolė.error (err);
 });

Kodas pateikia POST užklausą JSONPlaceholder API, kad būtų sukurtas naujas komentaras. The axios.post metodas siunčia duomenis į /comments galutinis taškas.

Prašyme siunčiami duomenys yra objektas su a vardas, paštu, ir kūnas nuosavybė. Jei prašymas patenkinamas, tada metodas registruoja atsakymo duomenis į konsolę. Ir jei yra klaida, sugauti metodas užregistruoja klaidą konsolėje.

PUT / PATCH užklausų teikimas naudojant „Axios“.

Galite naudoti PUT arba PATCH užklausą, kad atnaujintumėte esamą išteklius serveryje. Nors PUT pakeičia visą šaltinį, PATCH atnaujina tik nurodytus laukus.

Norėdami pateikti PUT arba PATCH užklausą naudodami Axios, turite naudoti .put() arba .patch () metodus.

Štai pavyzdys, kaip naudoti šiuos metodus norint atnaujinti paštu komentaro, kurio ID yra 100, savybė:

konst axios = reikalauti("aksios");
aksios
 .get(" https://jsonplaceholder.typicode.com/comments/100")
 .thena((res) => {
konsolė.log (res.data.email);
 })
 .catch((klysti) => {
konsolė.error (err);
 });
// Išvestis:
// '[email protected]'
aksios
 .patch(" https://jsonplaceholder.typicode.com/comments/100", {
 paštas: "[email protected]",
 })
 .thena((res) => {
konsolė.log (res.data.email);
 })
 .catch((klysti) => {
konsolė.error (err);
 });
// Išvestis:
// '[email protected]',

Ši programa pirmiausia pateikia GET užklausą galutiniam taškui " https://jsonplaceholder.typicode.com/comments/100". Tada jis registruoja paštu komentaro nuosavybė su ID 100 prie konsolės. Mes darome GET užklausą, kad galėtumėte pamatyti, kas pasikeitė po PATCH užklausos pateikimo.

Antroji užklausa yra PATCH užklausa tam pačiam galutiniam taškui. Šis kodas atnaujina komentaro el. paštą į [email protected].

Ištrinti užklausas naudojant „Axios“.

Galite naudoti IŠTRINTI prašymas ištrinti išteklius serveryje.

Paimkite šį pavyzdį, kaip naudoti .Ištrinti() būdas ištrinti išteklius iš serverio:

aksios
 .Ištrinti(" https://jsonplaceholder.typicode.com/comments/10")
 .thena((res) => {
konsolė.log (res.data);
 })
 .catch((klysti) => {
konsolė.error (err);
 });
//Output:
// {}

Užregistravus tuščią objektą prie konsolės, aukščiau pateiktas kodas rodo, kad jis ištrynė komentarą, kurio ID yra 10.

Vienalaikių užklausų teikimas naudojant „Axios“.

Naudodami „Axios“ galite gauti duomenis iš kelių galinių taškų vienu metu. Norėdami tai padaryti, turite naudoti .all() metodas. Šis metodas priima užklausų masyvą kaip savo parametrą ir išsprendžia tik tada, kai gaunate visus atsakymus.

Toliau pateiktame pavyzdyje .all() metodas vienu metu nuskaito duomenis iš dviejų galinių taškų:

aksios
 .all([
 axios.get(" https://jsonplaceholder.typicode.com/comments? _limit=2"),
 axios.get(" https://jsonplaceholder.typicode.com/posts? _limit=2"),
 ])
 .thena(
 axios.spread((komentarai, įrašai) => {
konsolė.log (komentarai.duomenys);
konsolė.log (posts.data);
 })
 )
 .catch((klysti) =>konsolė.error (err));

Aukščiau pateiktas kodo blokas siunčia užklausas vienu metu ir perduoda atsakymus į .tada () metodas. Axios .plisti() metodas atskiria atsakymus ir kiekvieną atsakymą priskiria jo kintamajam.

Galiausiai konsolė registruoja duomenis dviejų atsakymų: komentarų ir įrašų savybė.

Užklausų perėmimas naudojant „Axios“.

Kartais gali tekti perimti užklausą, kol ji pasiekia serverį. Galite naudoti „Axios“ interceptors.request.use() būdas perimti užklausas.

Šiame pavyzdyje metodas registruoja užklausos tipą konsolėje kiekvienai pateiktai užklausai:

axios.interceptors.request.use(
 (konfigūracija) => {
konsolė.log(`${config.method} pateiktas prašymas“.);
grąžinti konfigūracija;
 },
 (klaida) => {
grąžintiPažadas.atmesti (klaida);
 }
);
aksios
 .get(" https://jsonplaceholder.typicode.com/comments? _limit=2")
 .thena((res) =>konsolė.log (res.data))
 .catch((klysti) =>konsolė.error (err));

Programa apibrėžia Axios perėmėją naudodama axios.interceptors.request.use metodas. Šis metodas užtrunka konfig ir klaida objektai kaip argumentai. The konfig Objekte yra informacijos apie užklausą, įskaitant užklausos metodą (config.method) ir užklausos URL (config.url).

Perėmėjo funkcija grąžina konfig prieštarauja, todėl užklausa gali būti vykdoma įprastai. Jei yra klaida, funkcija grąžina atmestą Pažadas objektas.

Galiausiai programa pateikia prašymą išbandyti gaudytuvą. Konsolė užregistruos pateiktos užklausos tipą, šiuo atveju GET užklausą.

„Axios“ yra daugiau

Sužinojote, kaip pateikti ir perimti užklausas savo projektuose naudodami „Axios“. Daug kitų funkcijų, pvz., užklausų keitimas ir „Axios“ egzempliorių naudojimas, jums, kaip „JavaScript“ kūrėjui, yra prieinamos. „Axios“ išlieka pageidaujama parinktis teikiant HTTP užklausas „JavaScript“ programose. Tačiau Fetch API yra dar viena gera galimybė, kurią galite ištirti.