API:en Integrointi JavaScript-sovelluksissa
Työskenneltäessä API-rajapintojen kanssa yleisimmät HTTP-metodit ovat GET ja POST:
- GET: Käytetään tiedon hakemiseen palvelimelta;
- POST: Käytetään tiedon lähettämiseen palvelimelle, tyypillisesti lomakkeiden lähettämiseen tai JSON-datan siirtämiseen.
GET-pyynnön esimerkki
GET-pyyntö hakee tietoa palvelimelta muuttamatta mitään resursseja.
index.html
index.js
fetchPost-funktio käyttää fetch()-metodia lähettääkseen pyynnön määritettyyn päätepisteeseen (/posts/1). Kun vastaus on vastaanotettu, data jäsennetään JSON-muotoon ja viestin otsikko poimitaan sekä näytetään HTML-kappaleessa.
POST-pyynnön esimerkki
POST-pyyntö lähettää dataa palvelimelle, ja sitä käytetään usein uusien resurssien luomiseen tai lomaketietojen lähettämiseen.
index.html
index.js
sendPostRequest-funktio tekee pyynnön määritettyyn päätepisteeseen (/posts) käyttäen method-arvona 'POST'. Otsikot sisältävät 'Content-Type': 'application/json', mikä osoittaa, että lähetetään JSON-muotoista dataa. body sisältää JSON-muotoisen datan uuden julkaisun tiedoilla, kuten title, body ja userId. Pyynnön jälkeen palvelimen vastaus jäsennetään JSON-muotoon ja luodun julkaisun otsikko näytetään HTML:ssä.
Otsikoiden lähettäminen ja eri HTTP-metodien käsittely (GET, POST, PUT, DELETE)
Eri HTTP-metodeilla on eri käyttötarkoitukset. GET- ja POST-metodien lisäksi yleisiä metodeja ovat:
- PUT: Käytetään olemassa olevan resurssin päivittämiseen;
- DELETE: Käytetään resurssin poistamiseen palvelimelta.
Voit myös lähettää otsikoita minkä tahansa HTTP-metodin mukana tarjotaksesi lisätietoja, kuten todennustunnisteita tai sisällön tyyppiä.
PUT-pyynnön esimerkki: Datan päivittäminen
index.html
index.js
updatePost-funktio lähettää PUT-pyynnön määritettyyn päätepisteeseen (/posts/1) olemassa olevan julkaisun päivittämiseksi. Pyyntö sisältää method: 'PUT' päivitystoiminnon määrittämiseksi, ja headers-otsikot asetetaan sisältämään 'Content-Type': 'application/json', mikä osoittaa JSON-muodon. body sisältää JSON-muotoiset tiedot, mukaan lukien id, päivitetyn title-otsikon, body-sisällön ja userId-käyttäjätunnuksen. Kun vastaus on vastaanotettu, se jäsennetään JSON-muotoon ja päivitetty otsikko näytetään HTML:ssä.
DELETE-pyynnön esimerkki: Datan poistaminen
index.html
index.js
deletePost-funktio lähettää DELETE-pyynnön määritettyyn päätepisteeseen (/posts/1) poistaakseen tietyn postauksen. method: 'DELETE' määrittää toiminnon. Pyynnön jälkeen vastauksen tila tarkistetaan response.ok-muuttujalla: jos onnistuu, HTML:ssä näytetään onnistumisviesti ("Post deleted successfully."). Jos poisto epäonnistuu, sen sijaan näytetään virheilmoitus.
Kyselyparametrien käyttö API-pyynnöissä
Kyselyparametrien avulla voit lähettää lisätietoja URL-osoitteessa, kuten suodattaa dataa, lajitella tuloksia tai määrittää sivunumeroita sivutetuissa vastauksissa.
GET-pyyntö kyselyparametrien kanssa
index.html
index.js
fetchPostsByUser-funktio lähettää pyynnön API-päätepisteeseen käyttäen kyselyparametria (userId=1), joka suodattaa viestit vain kyseiselle käyttäjälle kuuluviksi. userId lisätään suoraan URL-osoitteeseen kyselyparametrina. Kun suodatetut tiedot on vastaanotettu, funktio näyttää HTML:ssä kyseiselle käyttäjälle löytyneiden viestien määrän.
1. Mitä HTTP-metodia käyttäisit hakeaksesi tietoja palvelimelta muuttamatta mitään resursseja?
2. Mikä seuraavista vahvistaa onnistuneen DELETE-pyynnön?
Kiitos palautteestasi!
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Can you explain the difference between GET and POST requests in more detail?
How do I use headers with different HTTP methods?
Can you provide examples of using query parameters in API requests?
Awesome!
Completion rate improved to 2.22API:en Integrointi JavaScript-sovelluksissa
Pyyhkäise näyttääksesi valikon
Työskenneltäessä API-rajapintojen kanssa yleisimmät HTTP-metodit ovat GET ja POST:
- GET: Käytetään tiedon hakemiseen palvelimelta;
- POST: Käytetään tiedon lähettämiseen palvelimelle, tyypillisesti lomakkeiden lähettämiseen tai JSON-datan siirtämiseen.
GET-pyynnön esimerkki
GET-pyyntö hakee tietoa palvelimelta muuttamatta mitään resursseja.
index.html
index.js
fetchPost-funktio käyttää fetch()-metodia lähettääkseen pyynnön määritettyyn päätepisteeseen (/posts/1). Kun vastaus on vastaanotettu, data jäsennetään JSON-muotoon ja viestin otsikko poimitaan sekä näytetään HTML-kappaleessa.
POST-pyynnön esimerkki
POST-pyyntö lähettää dataa palvelimelle, ja sitä käytetään usein uusien resurssien luomiseen tai lomaketietojen lähettämiseen.
index.html
index.js
sendPostRequest-funktio tekee pyynnön määritettyyn päätepisteeseen (/posts) käyttäen method-arvona 'POST'. Otsikot sisältävät 'Content-Type': 'application/json', mikä osoittaa, että lähetetään JSON-muotoista dataa. body sisältää JSON-muotoisen datan uuden julkaisun tiedoilla, kuten title, body ja userId. Pyynnön jälkeen palvelimen vastaus jäsennetään JSON-muotoon ja luodun julkaisun otsikko näytetään HTML:ssä.
Otsikoiden lähettäminen ja eri HTTP-metodien käsittely (GET, POST, PUT, DELETE)
Eri HTTP-metodeilla on eri käyttötarkoitukset. GET- ja POST-metodien lisäksi yleisiä metodeja ovat:
- PUT: Käytetään olemassa olevan resurssin päivittämiseen;
- DELETE: Käytetään resurssin poistamiseen palvelimelta.
Voit myös lähettää otsikoita minkä tahansa HTTP-metodin mukana tarjotaksesi lisätietoja, kuten todennustunnisteita tai sisällön tyyppiä.
PUT-pyynnön esimerkki: Datan päivittäminen
index.html
index.js
updatePost-funktio lähettää PUT-pyynnön määritettyyn päätepisteeseen (/posts/1) olemassa olevan julkaisun päivittämiseksi. Pyyntö sisältää method: 'PUT' päivitystoiminnon määrittämiseksi, ja headers-otsikot asetetaan sisältämään 'Content-Type': 'application/json', mikä osoittaa JSON-muodon. body sisältää JSON-muotoiset tiedot, mukaan lukien id, päivitetyn title-otsikon, body-sisällön ja userId-käyttäjätunnuksen. Kun vastaus on vastaanotettu, se jäsennetään JSON-muotoon ja päivitetty otsikko näytetään HTML:ssä.
DELETE-pyynnön esimerkki: Datan poistaminen
index.html
index.js
deletePost-funktio lähettää DELETE-pyynnön määritettyyn päätepisteeseen (/posts/1) poistaakseen tietyn postauksen. method: 'DELETE' määrittää toiminnon. Pyynnön jälkeen vastauksen tila tarkistetaan response.ok-muuttujalla: jos onnistuu, HTML:ssä näytetään onnistumisviesti ("Post deleted successfully."). Jos poisto epäonnistuu, sen sijaan näytetään virheilmoitus.
Kyselyparametrien käyttö API-pyynnöissä
Kyselyparametrien avulla voit lähettää lisätietoja URL-osoitteessa, kuten suodattaa dataa, lajitella tuloksia tai määrittää sivunumeroita sivutetuissa vastauksissa.
GET-pyyntö kyselyparametrien kanssa
index.html
index.js
fetchPostsByUser-funktio lähettää pyynnön API-päätepisteeseen käyttäen kyselyparametria (userId=1), joka suodattaa viestit vain kyseiselle käyttäjälle kuuluviksi. userId lisätään suoraan URL-osoitteeseen kyselyparametrina. Kun suodatetut tiedot on vastaanotettu, funktio näyttää HTML:ssä kyseiselle käyttäjälle löytyneiden viestien määrän.
1. Mitä HTTP-metodia käyttäisit hakeaksesi tietoja palvelimelta muuttamatta mitään resursseja?
2. Mikä seuraavista vahvistaa onnistuneen DELETE-pyynnön?
Kiitos palautteestasi!
