Anfänger-Tutorial zu Web-APIs + Schneller Einstieg

So sah es aus, als ich anfing, mit APIs zu arbeiten.

Sie möchten also eine API verwenden?

Wenn Sie dies lesen, suchen Sie wahrscheinlich nach etwas in der Art von:

"Wie verwende ich eine API?"
"Welche Bibliothek verwende ich für eine API?"
"Was ist eine API?"
"Bitte helfen Sie mir, dass ich bei der Wetter-App-API von freeCodeCamp nicht weiterkomme und nicht weiß, was ich tue."

Nun, ich werde Ihnen das Leben 100x leichter machen, weil ich in genau demselben Boot saß wie Sie.

Also machen Sie mit, denn nach dem Lesen verspreche ich Ihnen, dass Sie genau verstehen werden, was eine API ist und wie Sie mit einer interagieren.

Das wichtigste zuerst.

Wir müssen verstehen, was ein Objekt ist.

Ich weiß, dass Sie so etwas gesehen haben.

Scheint bekannt? Ja, ich weiß, wahrscheinlich eines der ersten Dinge, die Sie in Ihrer JavaScript-Reise gelernt haben.

Okay, worum geht es dir? Was hat das mit irgendetwas zu tun?

Merken Sie etwas an diesem Objekt? Keine Trickfrage.

Was sagt Ihnen dieses Objekt?

Äh, es ist ein Objekt mit dem Namen "Person"? Es hat Schlüssel und Werte ... na und?

Guter Start.

Okay, was sagt es sonst noch? Was genau sagt Ihnen dieses Objekt?

Was beschreibt es?

Oh. Es ist ein Objekt namens Person. Es hat einen Namen, der Mario ist. Ein Alter von 22 Jahren. Ein Bruder namens Luigi. Und ich denke, Essen ist Pilz?

Jetzt verstehst du es!

Lassen Sie uns weitermachen.

Was ist damit?

Ist das nicht die gleiche Scheiße?

Schau genauer hin.

Äh, gibt es keine Erklärung? Als gäbe es keine konstante Person = jetzt.

Du wirst wärmer ...

Die Schlüssel haben Anführungszeichen?

Genau.

NA UND?

Was Sie verstehen müssen, ist, dass das erste Snippet Ihr reguläres alltägliches JavaScript-Objekt ist, das zweite Snippet ist sehr ähnlich, aber das heißt JSON.

Der wichtigste Punkt ist zu wissen, dass die API, mit der Sie arbeiten, im Allgemeinen immer JSON ausspuckt. Das ist der Schlüssel.

Das mentale Modell, das ich Ihrem Gehirn vermitteln möchte, ist, dass die Arbeit mit einer API so einfach ist wie die Arbeit mit einem Objekt.

Also zurück zum ersten Ausschnitt. Wenn ich den Namen dieser Person haben wollte, was müsste ich schreiben?

Das ist einfach. Ich würde einfach über die Punktnotation auf die Namenseigenschaft zugreifen. Ich könnte einfach Person.name machen und das würde mir "Mario" geben.

Was ist nun mit JSON?

Äh. Das gleiche…?

Fast. Die Sache ist, es ist nur ein anonymes Objekt. Wie würden wir .name ohne etwas vor der Punktnotation verwenden?

Hallo! Das war eine Trickfrage. Das ist nicht fair!
Aber okay. Wie würden wir es zuordnen?

Das ist einfach.

Erinnerst du dich, was ich vorher gesagt habe? Wie würde ein JSON normalerweise eine Antwort von einer API sein?

Verwenden wir ein praktisches Beispiel. Lassen Sie uns tatsächlich Daten von einer API abrufen.

Fügen Sie dies in die Konsole Ihres Webbrowsers ein.

Was siehst du?

Das sieht ein bisschen anders aus. Aber ein bisschen vertrauter als zuvor. Es ist einfach ein Array von Objekten.

Und wenn ich den Namen des ersten Objekts im Array haben wollte?

Einfach! Verwenden Sie [0], um das erste Objekt abzurufen, und verwenden Sie dann .name, um den Namen abzurufen!

Jetzt verstehst du es.

Okay. Aber… wie funktioniert das alles? Wo ist es zugeordnet? Was macht dieser Code? Es scheint eine Menge zu geben, die Sie aufgehört haben. Ich bin verloren!

Ich werde es so einfach wie möglich machen. Sie werden es vielleicht nicht ganz verstehen, aber das wird bald mit der Zeit kommen.

Werfen wir einen Blick auf eine kommentierte Version dieses Snippets.

Und los geht's!

Sie sollten nun die Grundlagen zum Aufrufen einer API verstehen und in der Lage sein, die Daten zu erfassen und etwas damit zu tun.

In diesem Fall konnten wir die API aufrufen und jetzt das erste Objekt und den Namen console.log abrufen.

Also hier ist die Herausforderung.

Ich möchte, dass Sie Daten aufnehmen und in das DOM eingeben.

Hier ist Ihr Startcode. Kopieren Sie diese einfach und fügen Sie sie in eine HTML-Datei in Ihrem bevorzugten Texteditor ein und versuchen Sie, die Lücken auszufüllen.

Bonuspunkte, wenn Sie einen anderen Endpunkt verwenden! Versuchen Sie es mit dem Endpunkt / posts.