Il servizio $http

30 giugno 2015

AngularJS dispone di diversi servizi predefiniti utilizzabili nelle nostre applicazioni. Tra questi uno dei più utilizzati, soprattutto in un contesto di Single Page Application, è il servizio $http.

Questo servizio consente di effettuare chiamate Ajax al server e di gestire le risposte in maniera molto semplice. Esso mette a disposizione un oggetto che fornisce i metodi per invocare i corrispondenti metodi HTTP:

$http.get(url) 	
$http.post(url, dati) 	
$http.put(url, dati) 	
$http.delete(url) 	
$http.head(url)

Come possiamo notare, i metodi post e put prevedono un secondo parametro che rappresenta i dati da inviare al server. Se il parametro dati è un oggetto JavaScript, esso viene automaticamente serializzato in JSON.

I metodi del servizio $http restituiscono delle promise, cioè degli oggetti che consentono di gestire in maniera strutturata l’esito di chiamate asincrone.

Le promise restituite dai metodi di $http mettono a disposizione i metodi:

MetodoDescrizione
success()consente di gestire la risposta del server in caso di esito positivo
error()per gestire situazioni di errore

Vediamo con un esempio come poter utilizzare il servizio $http all’interno di un controller e sfruttare i metodi della promise restituita:

angular.module("myApp") 
	.controller("elencoController", function($scope, $http) { 
		$http.get("/elencoCitta") 
			.success(function(data) { 
				$scope.elencoCitta = data; 
			}) 
			.error(function() { 
				alert("Si è verificato un errore!"); 
			}); 
	});

Questo controller carica l’elenco delle città da visualizzare effettuando una chiamata al server. In questo caso ricorriamo al servizio $http definendone la dipendenza nei parametri del metodo controller(). Quindi utilizziamo il metodo get() specificando l’URL relativo sul server e concateniamo le chiamate a success() ed error() per gestire l’esito della richiesta.

In caso di successo, i dati restituiti dal server vengono associati alla variabile di scope elencoCitta.

Per un esempio di utilizzo del metodo post() di $http, rivediamo l’implementazione del controller cittaController che aggiunge una città all’elenco:

angular.module("myApp") 
	.controller("cittaController", function($scope, $http) { 
		$scope.aggiungiCitta = function() { 
			$http.post("/elencoCitta", {nome: $scope.nome, regione: $scope.regione}) 
				.success(function() { 
					alert("Città aggiunta correttamente!"); 
				}) 
				.error(function() { 
					alert("Si è verificato un errore!"); 
				}); 
		}; 
	});

Possiamo vedere anche in questo caso come l’uso del metodo post() sia abbastanza intuitivo. Il secondo parametro del metodo costruisce l’oggetto da inviare al server in base all’input dell’utente associato alle variabili di scope nome e regione.

Tutti i metodi del servizio $http corrispondenti ai metodi HTTP prevedono un ulteriore parametro opzionale che consente di specificare eventuali configurazioni aggiuntive per la richiesta da inviare al server. Questo parametro prevede un oggetto con le seguenti possibili proprietà:

ProprietàDescrizione
methodStringa che rappresenta il metodo HTTP da utilizzare nella richiesta. In realtà questo valore è implicitamente impostato dal metodo invocato, quindi raramente questa impostazione viene utilizzata
urlURL su cui invocare il metodo. Anche in questo caso questa impostazione raramente viene utilizzata dal momento che l’URL viene passata come parametro del metodo invocato
paramsOggetto JavaScript che rappresenta eventuali parametri da aggiungere in coda all’URL
headersOggetto JavaScript che rappresenta gli header HTTP da inviare al server con la richiesta
timeoutTempo massimo di attesa di una risposta da parte del server espresso in millisecondi
transformRequestFunzione che può trasformare la richiesta prima di inviarla al server
transformResponseFunzione che può trasformare la risposta prima di passarla all’applicazione

Il seguente esempio mostra come specificare un timeout e l’header della Basic Authentication ad una richiesta HTTP:

$http.get("/elencoCitta",
	      { timeout: 30000, 
		    headers: { 
				"Authorization": "Basic bm9tZXV0ZW50ZTpwYXNzd29yZA=="}
          });

Abbiamo visto come il metodo success() delle promise restituite da get() e post() di $http ci fornisce, tramite il parametro data, i dati inviati dal server.

In realtà, sia il metodo success() che il metodo error() forniscono informazioni sull’esito delle richieste tramite quattro parametri:

ParametroDescrizione
dataRappresenta i dati restituiti dal server alla richiesta effettuata dalla nostra applicazione
statusÈ il codice di stato HTTP inviato dal server
headersRappresenta gli header HTTP inviati dal server con la risposta
configRappresenta la configurazione HTTP utilizzata per effettuare la chiamata, cioè il parametro opzionale impostato implicitamente o esplicitamente nella chiamata del metodo di $http

Sfruttando questi parametri possiamo analizzare in dettaglio la risposta del server e fornire un feedback adeguato all’utente in caso di errore.

Tutte le lezioni

1 ... 16 17 18 ... 38

Se vuoi aggiornamenti su Il servizio $http inserisci la tua e-mail nel box qui sotto:
Tags:
 
X
Se vuoi aggiornamenti su Il servizio $http

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy