Angular 6: il mio nuovo libro acquistabile su AMAZON (-15%). Gratuito con 18app e carta docenti. Clicca qui
jQuery Tutorial

REST API per operazioni di test e progettazione

Articolo a cura di: Davide Copelli Angular

Facebook

Le classiche operazioni di un'applicazione CRUD, necessitano di una RESTFULL API progettata ad hoc. Spesso questo rallenta il processo di sviluppo dell'applicazione, perché è necessario interrompere il flusso di sviluppo del front-end, e passare alla parte server, questo indipendentemente dal framework che si sta usando (Angular, React, Vue, etc)

Ci viene in aiuto un servizio web, che permette di inviare al volo tutte le tipiche richieste di un'applicazione CRUD. Si tratta di JSON Placeholder che puoi consultare a questo link.

Mette a disposizione diversi endpoint in modalità POST, GET, DELETE e PUT suddivisi in alcune tipologie classiche di CATEGORIE di dati (articoli, commenti, album, foto, utenti, lista cose da fare).

Ogni endpoint è caratterizzato da una struttura del tipo:

https://jsonplaceholder.typicode.com/CATEGORIA/MODALITA

Ognuno può essere testato sfruttando una qualsiasi API. Se stai sviluppando in JavaScript o Vue o jQuery, potresti usare la libreria fetch o axio, se invece stai sviluppando in Angular, la libreria HTTPClientModule.

Qui di seguito un elenco di endpoint che potresti usare per inviare dei dati e ricevere una risposta in formato JSON, sfruttando ad esempio fetch():

Operazione di elenco articoli - GET

Se volessi visualizzare l'elenco degli articoli presenti in un ipotetico database, potrei scrivere:

fetch('https://jsonplaceholder.typicode.com/posts')
  .then(response => response.json())
  .then(json => console.log(json))

La risposta fornita è un array di oggetti con proprietà userid, id, title, body:

[
  {
    "userId": 1,
    "id": 1,
    "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
    "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
  },
  {
    "userId": 1,
    "id": 2,
    "title": "qui est esse",
    "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
  }
]

La stessa operazione effettuata in Angular potresti scriverla così:

    this.httpClient.get("https://jsonplaceholder.typicode.com/posts").subscribe(
      success => {
        console.log("Successfully Completed");
        console.log(success);
      }
    );

Operazione di lettura singolo articolo - GET

Se invece volessi recuperare i dati di uno specifico articolo caratterizzato da una chiave id pari a 1, potrei scrivere:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(json => console.log(json))

La risposta fornita è un oggetto JSON con proprietà userId, id, title, body:

{
  "userId": 1,
  "id": 1,
  "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
  "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
}

Operazione di modifica singolo articolo - PUT

Nel caso volessi aggiornare i dati già memorizzare in precedenza per un articolo con id pari a 1, potrei scrivere:

fetch('https://jsonplaceholder.typicode.com/posts/1', {
    method: 'PUT',
    body: JSON.stringify({
      id: 1,
      title: 'foo',
      body: 'bar',
      userId: 1
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8"
    }
  })
  .then(response => response.json())
  .then(json => console.log(json))

La risposta fornita è un oggetto JSON con proprietà userId, id, title, bodym che rappresentano proprio il nuovo dato modificato. Chiaramente le modifiche non saranno salvate da nessuna parte.

{
  id: 1,
  title: 'foo',
  body: 'quia et suscipit [...]',
  userId: 1
}

Operazione di cancellazione singolo articolo - DELETE

Infine nel caso volessi cancellare un articolo con id=1, potrei scrivere:

fetch('https://jsonplaceholder.typicode.com/posts/1', {
  method: 'DELETE'
})

Ricevi le anteprime dei nuovi corsi! Iscriviti Gratuitamente

Cliccando su Iscriviti, accetti le nostre condizioni d'uso e la politica sulla privacy

×