Foretag Deres første API-kald
Hent data fra en tjeneste.
Foretag Deres første API-kald er en gratis Vibe-programmering-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Vibe-programmering, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Vibe-programmering-kurset indeholder 4 lektioner i alt.
Fra læsning til handling
Du har læst dokumentationen; nu foretager du en rigtig anmodning. Målet med denne lektion er ét vellykket kald, der returnerer aktuelle data til din app.
Vi vælger en enkel, gratis API, bygger anmodningen, sender den og læser svaret, mens du bruger din AI-assistent til at skrive og fejlfinde koden undervejs.
Vælg en enkel API
Til det første kald skal du vælge en API uden tilmelding og med et tydeligt GET-endpoint. Offentlige tjenester til vittigheder, citater eller offentligt vejr er ideelle øvelsesområder.
En enkel start fjerner forstyrrelser fra godkendelse og fakturering, så du kan fokusere på selve forløbet fra anmodning til svar.
Recommend one free, no-key API with a simple GET endpoint I can use
to practice my very first API call. Give me the exact URL.Anmodningens bestanddele
En grundlæggende GET-anmodning kræver kun en URL og en metode. Valgfrie headere og forespørgselsparametre finjusterer den. De fleste første kald består af én enkelt kodelinje.
Bed din assistent skrive linjen på dit sprog og forklare hver del, så du forstår, hvad du sender, i stedet for at kopiere blindt.
Write a single fetch GET request in JavaScript to this URL and
explain what each part of the line does.Send med fetch
I JavaScript sender fetch anmodningen og returnerer et promise. Du afventer svaret og kalder derefter response.json() for at hente de fortolkede data.
Dette totrinsmønster, fetch efterfulgt af fortolkning, er grundlaget for næsten enhver browserbaseret integration, du kommer til at bygge med en assistent.
Show me a complete async function using fetch that calls this URL,
awaits the response, parses the JSON, and logs the result.Læs svaret
Det fortolkede svar er normalt et JSON-objekt. Du finder værdier i det via en nøgle, f.eks. data.results[0].name, for at hente den værdi, du ønsker.
Hvis strukturen forvirrer dig, kan du indsætte det faktiske svar i din assistent og bede om den nøjagtige sti til det felt, du har brug for.
Here is the JSON my call returned. Give me the exact path to read
the author's name and the quote text.Tilføj forespørgselsparametre
Forespørgselsparametre står efter et spørgsmålstegn i URL'en, f.eks. ?city=Paris&units=metric. De filtrerer eller former det, endpointet returnerer.
Byg dem omhyggeligt, for en slåfejl betyder forkerte eller tomme data. Din assistent kan pålideligt konstruere en URL med parametre ud fra dine input.
Build the full URL for this endpoint with query parameters for
city Istanbul and metric units, then write the fetch call.Send headere
Nogle endpoints kræver headere, f.eks. Accept: application/json eller en indholdstype. Headere følger med anmodningen som metadata og er adskilt fra URL'en.
Når dokumentationen nævner en påkrævet header, skal du bede din assistent inkludere den i fetch-indstillingsobjektet, så kaldet accepteres.
Add an Accept: application/json header to this fetch request and
show me the full updated code.Log for at se resultaterne
Før du kobler data til din brugerflade, skal du logge svaret til konsollen. Når du ser det rå objekt, bekræfter det, at kaldet virkede, og afslører de faktiske feltnavne.
Denne vane opdager overraskelser tidligt. Mange integrationsfejl skyldes blot, at et felt hedder noget andet end det, dokumentationen antydede.
Vis data på skærmen
Når du har dataene, er det sidste trin at gengive dem. Du tildeler den fortolkede værdi til en variabel, som din visning viser, f.eks. en tekstetiket eller et listeelement.
Beskriv den brugerflade, du ønsker, for din assistent sammen med svarstrukturen, og lad den generere gengivelseskoden til dit framework.
I have this JSON response. Render the quote and author inside a
simple card component on my page.Når kaldet mislykkes
Hvis dit første kald mislykkes, skal du kontrollere statuskoden og stavningen af URL'en. En 404 betyder et forkert endpoint, en 401 betyder manglende godkendelse, og en slåfejl betyder tomme data.
Indsæt den nøjagtige fejl og din kode i din assistent. Med begge dele kan den normalt finde løsningen i ét svar.
My fetch returned this error and status code. Here is my code.
What is wrong and how do I fix it?Fejr det, og generalisér
Et fungerende første kald er en milepæl. Det samme mønster – byg URL, fetch, fortolk, gengiv – gælder for næsten enhver API, du nogensinde kommer til at bruge.
Når ét kald virker, består udskiftningen med et nyt endpoint for det meste i at ændre URL'en og de felter, du læser. Færdigheden kan bruges direkte andre steder.
Hurtigt tjek
Test, hvor godt du forstår at foretage et første API-kald.
Opsummering
Du valgte en enkel API, byggede en anmodning med valgfrie parametre og headere, sendte den med fetch, fortolkede JSON'en, loggede den og gengav resultatet.
Fejl aflæses fra statuskoder og rettes med din assistent. Derefter skal du håndtere API-nøgler sikkert og håndtere fejl på en robust måde.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 25
- Lektioner
- 100
Ofte stillede spørgsmål
Er lektionen “Foretag Deres første API-kald” gratis?
Ja — alle 3 lektioner i læringssporet Vibe-programmering, inklusive “Foretag Deres første API-kald”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Vibe-programmering-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Foretag Deres første API-kald”?
Hent data fra en tjeneste. Du øver dig i Vibe-programmering med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Vibe-programmering?
Der kræves ingen tidligere erfaring. Vibe-programmering på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Foretag Deres første API-kald”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Vibe-programmering-lektion?
Ja. Alle Vibe-programmering-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Hvad en API er
- Læs API-dokumentation med AI
- Foretag Deres første API-kald
- Håndtér nøgler og fejl