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
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!
