Einstieg in axios.js

Das tägliche Brot eines Webentwicklers sind XHR / Ajax Anfragen zu generieren. Also man fragt an einer Schnittstelle nach Daten an. Das ist auch ein alter Hut. Dafür gibt es auch nicht einen Weg sondern viele. Und keiner ist richtiger oder falsch. Es ist immer Geschmackssache und vom Fall abhängig. Ich bevorzuge in meiner Javascript Programmierung immer den reinen Weg. Also Vanilla JS. Ich bilde mir ein damit den Clients (also die Webbrowser der Benutzer) zu schonen und somit auch ökologisch Nachhaltig zu entwickeln. Allerdings gibt es Kunden die wollen schnell und günstig eine Lösung und für die gibt es Javascript Frameworks wie zum Beispiel Jquery.

An sich ist Jquery auch eine ganz nette Sache aber ich nutze es wirklich fast nie. In meiner Praxis ist mir zum Thema Jquery aufgefallen, dass ganz gerne und häufig Webdesigner die wenig mit Programmierung und Programmierkonzepte zu tun haben, Jquery benutzen. Bis nach ein zwei Jahren der Kunde von ihnen feststellt, dass ihre Seite ganz schön langsam und auch ganz schön bugy (Mehrzahl von bug) ist läuft. Dann wird ein Softwareentwickler bzw. Frontendentwickler mit der Sache vertraut gemacht. Und dieser sieht nach 2 Tagen Analyse des Spagetti Codes auch nicht mehr so ganz gesund aus. Das sind die Momente wo man erkennt, schnelle und günstige Softwareentwicklung wird am Ende des Tages immer die teurere Variante sein. Lieber gleich zum guten Handwerker gehen statt diesen zu beauftragen wenn es zu spät ist.

Aber es gibt auch Javascript Bibliotheken die man genau für diese Fälle in sein Projekt einbinden kann. Somit muss man nicht gleich ein ganzes JS Framework wie Vue JS oder ReactJS nutzen. Für ein geschmeidiges XHR Handling vertraue ich aber auch Vue JS Axios.

Zum Vergleich stelle ich Euch mal Axios zu Fetch gegenüber.

GET Request Axios vs. Fetch

function get_data_with_fetch() {
	try {
		return fetch('https://jsonplaceholder.typicode.com/todos/1')
		  .then(response => response.json())
	} catch (error) {
		console.error(error)
	}
}
get_data_with_fetch().then(json => {
	console.log("get_data_with_fetch",json)
	let o = document.getElementById("output1");
	o.innerHTML = JSON.stringify(json)
})


function get_data_with_axios() {
	try {
		return axios({
		  url: 'https://jsonplaceholder.typicode.com/todos/2',
		  method: 'get'
		})
	} catch (error) {
		console.error(error)
	}	
}
get_data_with_axios().then(res => {
	console.log("get_data_with_axios",res)
	let o = document.getElementById("output2");
	o.innerHTML = JSON.stringify(res.data)
})

POST Request Axios vs. Fetch


function post_data_with_fetch() {
	try {
		return fetch('https://jsonplaceholder.typicode.com/posts', {
		  method: 'POST',
		  body: JSON.stringify({
		    title: 'foo',
		    body: 'fetch',
		    userId: 1,
		  }),
		  headers: {
		    'Content-type': 'application/json; charset=UTF-8',
		  },
		})
	} catch (error) {
		console.error(error)
	}	
}
post_data_with_fetch().then((response) => response.json())
  .then((json) => {
	console.log("post_data_with_fetch",json)
	let o = document.getElementById("output3");
	o.innerHTML = JSON.stringify(json)
})


function post_data_with_axios() {
	try {
		return axios.post('https://jsonplaceholder.typicode.com/posts', {
		    title: 'foo',
		    body: 'axios',
		    userId: 1,
		})
	} catch (error) {
		console.error(error)
	}	
}
post_data_with_axios().then((json) => {
	console.log("post_data_with_axios",json)
	let o = document.getElementById("output4");
	o.innerHTML = JSON.stringify(json.data)
})

DEMO


Leave a Comment

Your email address will not be published.

*

*

Empfholende Artikel


Alphanumeric sorting of an array with objects according to the value of an object

June 30, 2022

Especially in the frontend it happens quite often that you want to sort an array, an array with objects according to a certain pattern. Javascript has very performant and nice functions. But you can use these functions not only in the frontend. If you write your backend with NodeJS you will also appreciate the array […]

JS reduce()

March 21, 2022

Man hat ein array und möchte zum Beispiel alle Zahlen im Array kumulieren. Mit der Javascript Array Function reduce() geht das ganz leicht.

Return days of a month in an array

March 14, 2022

You need all days of a certain month then you can use this function: getDaysInMonth = (month,year) => new Date(year, month, 0).getDate();console.log( […Array(getDaysInMonth(3, 2022)).keys()] ); Greets!

JS flat()

March 9, 2022

Es kommt schon mal vor das man geschachtelte arrays bekommt.Zum Beispiel: Man möchte aus einem geschachteltem Array alle Werte in einem Array sammeln. Mit der array Funktion flat() ist das kein Problem. Auch mehrstuffig verschachtelte Arrays kann man geradeziehen (flatten). Indem man der flat Funktion die Anzahl der verschachtelungen die aufgelöst werden sollen, mitgibt. Da […]

JS bind()

March 8, 2022

Ein einfaches besipiel um JS bind() function zu verdeutlichen:

Javascript – Fakultät berechnen

January 19, 2022

Ab und an braucht man das und nicht nur in der Kombinatorik. Wer es etwas übersichtlicher braucht (und dazu zähle ich mich auch) kann es auch in einer for schleife machen.