[S8L3] Async, Ajax, Axios

Question 1

Was ist Asynchronous Code?

Answer 1

• Es erlaubt es JavaScript zwei Dinge auf einmal zu tun, bzgl. diese Asyncron zu erledigen
• Damit kann der Browser Dinge weiterhin ausführen während gerade etwas anderes passiert, wie z.B. ein API Call
• Dabei wird ein Helfer Object Namens Promise erstellt, welches dem Browser sofort Bescheid sagt wenn die Async Aufgabe erledigt ist

Question 2

Was ist ein Promise?

Answer 2

• Ein Object mit einigen Eigenschaften
• Wird bei dem Invoken einer Async Function erstellt
• Informiert die JavaScript Engine darüber wenn ein Async Function fertig ist
• Promises werden mit dem new Keyword instanziert und erhalten eine Callback Function, welche eine resolve und reject Function besitzt
• Besitzen 3 enum values “pending”, “resolved”, “rejected”
• Bei erfolgreich wird resolve() gecalled, ansonsten reject()
• Wenn ein Promise resolved oder rejected ist, nutzt man die Promise Methoden .then() oder .catch() um der JavaScript Engine zu sagen was danach kommt

Question 3

Was sind die .then und .catch Methoden?

Answer 3

• Sind Methoden des Promise Objects, welche eine Callback Function als Argument erhalten
• Wenn die Async Function fertig ist wird der Callback ausgeführt

Question 4

Wie sieht eine Async Function aus?

Answer 4

const asyncFunction = () => {
 return new Promise((resolve, reject) => {
 // perform some async action
if (asyncFinishedSuccessfully) {
resolve(dataObject);
} else {
reject(errorMessage);
}
});
};

asyncFunction()
.then((dataPassedFromResolve) => {
console. .log(“async stuff finished”, dataPassedFromResolve);
})
.catch((errorPassedFromResolve) => {
console .log(“async stuff rejected”, errorPassedFromResolve);
});

Question 5

Wann braucht man keinen neuen Promise zu erstellen?

Answer 5

-Oft bei API Calls, da unter der Haube dies für uns gemacht wird

axios.get("url")
 .then(response => {
console.log("response");
})
 .catch(err => {
 console.log("response");M
});

Question 6

Was ist Ajax?

Answer 6

• Ein Konzept um Daten mit einem Server auszutauschen und Teile einer Website zu laden ohne die Website neuzuladen
• Man möchte Api Calls machen und Teile der Seite mit neuen Daten füttern ohne die Webseite neuzuladen
• Kann mit Axios und Browser Fetch erreicht werden

Question 7

Wie sieht ein AJAX call aus?

Answer 7

componentDidMount() {
console.log('inside CDM');
fetch("URL")
 .then(res => res.json())
 .then(dogs => console.log(dogs))
 .catch(err => console.log(err));
 console,log('below fetch');

Question 8

Was ist HTTP?

Question 9

Welche HTTP Methoden gibt es?

Answer 9

• POST (New Resource in DB) CREATE
• GET )Read Data from DB) READ
• PUT (Update Data in the DB) UPDATE
• DELETE (Delete Data from the DB) DELETE

Question 10

Wofür steht CRUD?

Answer 10

Create
Read
Update
Delete

Question 11

Was sind HTTP Response Codes?

Answer 11

Successfull Responses (2xx)

• 200 OK
• 201 Created
• 202 Accepted

Client Errors (4xx)
400 Bad Request
403 Forbidden

Server Error Responses (5xx)
500 Internal Server Error

Question 12

Was ist Axios?

Answer 12

-Eine Library um HTTP aus Web Applicaton zu Web Servern zu machen

Question 13

Wie benutzt man Axios?

Answer 13

npm install axios
yarn add axios

import axios from “axios”;

axios.get("URL")
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});

ODER

componentDidMount() {
axios
.get(‘https://dog.ceo/api/breed/husky/images’)
.then(res => console.log(res.data.message))
.catch(err => console.log(err));
}

Question 14

Wie kann man AJAX calls im Browser einsehen?

Answer 14

• Im Network Tab des Inspections Tools des Browsers
• Name auswählen
• Response zum Angucken
• Timing zum Zeitmessen

Question 15

Ist async gleich Multithreading?

Answer 15

• Nein, die JavaScript Engine macht trotzdem nur eine Sache

- Multithreading wird doch ServiceWorker erreicht

Question 16

Wie aktualisiert man den Network Tab des Inspections Tools von Chrome?

Answer 16

-STRG + R