rss

ExtJS - Ext.data.Store - traitement d'exception pour un service JSON

Aujourd'hui, voici un mini tutoriel permettant de comprendre comment gérer un retour en erreur pour un appel de service JSON depuis un client JavaScript utilisant ExtJS API doc..

Personnellement, je trouve qu'ExtJS est assez bien documenté pour les cas nominaux, mais manque cruellement d'exemples dans le cas des traitements d'exception. C'est dommage car on le sait bien, les cas nominaux ne sont pas toujours au rendez-vous ;)

Dans ce mini tutoriel, un service "getUsers" permet de retourner une liste d'utilisateurs (il peut être implémenté en PHP par exemple, mais ce n'est pas l'objet de ce tutorial).

Voici un exemple de retour fait par ce service lorsqu'aucune erreur ne survient :
{
"results":4,
"rows":
[{"id":"1",
"login":"brice",
"date_inscription":"2009-02-10 14:20:00",
"fullname":"Brice"},
{"id":"10",
"login":"toto",
"date_inscription":"2009-10-28 08:10:00",
"fullname":"toto"},
{"id":"11",
"login":"toto2",
"date_inscription":"2009-10-28 08:10:00",
"fullname":"toto2"},
{"id":"13",
"login":"toto4",
"date_inscription":"2009-10-28 09:10:00",
"fullname":"toto4"}],
"success":true
}
A noter : dans cet exemple, 4 utilisateurs sont retournés sous le noeud "rows", et la propriété "success" vaut "true".

Voici le retour du même service lorsqu'une erreur survient (ie. Base de donnée injoignable) :
{
"results":1,
"success":false,
"errors":[
{"id":"500",
"msg":"Erreur de connexion à la base de donnée."
}]
}
A noter : dans cet exemple, 1 exception a été levée et traduite sous la forme d'un message d'erreur (id="500", msg="Erreur de connexion à la base de donnée."), et la propriété "success" vaut "false".

Voici maintenant comment gérer ces 2 types de retour côté client à l'aide d'ExtJS :
var dateFormat = 'Y-m-d G:i:s';
// ancienne valeur par defaut : 'm/d/Y'
// dateFormat correspond a une date
// de la forme : "2009-10-28 10:10:00"

var myStore = new Ext.data.Store({
url: 'http://localhost/getUsers.php5', // URL du service JSON
title: 'TOTO',
reader: new Ext.data.JsonReader({ // Reader JSON
idProperty: 'id',
root: 'rows',
totalProperty: 'results',
successProperty:'success',
fields: [
{name: 'id'},
{name: 'login'},
{name: 'date_inscription',
type: 'date',
dateFormat: dateFormat},
{name: 'fullname'}
]
})
});
A noter : dans cet exemple, on déclare l'Ext.data.Storedoc "myStore" qui va faire appel au service ('getUsers.php5'), et va lire le résultat grâce à un analyseur JSON (JSONReaderdoc). La lecture sera considérée comme un succès si la propriété "success" vaut "true". La manière d'interpréter les différents champs est également décrite.

On va également implémenter un analyseur JSON (JSONReader) capable d'interpréter un retour en erreur :
var errorReader = new Ext.data.JsonReader({
idProperty: 'id',
root: 'errors',
totalProperty: 'results',
fields: [
{name: 'id'},
{name: 'msg'}
]
});
A noter : dans cet exemple, la structure JSON lue doit posséder le nombre d'erreur sous "results" et les différentes erreurs sous la racine "errors". Ici une erreur comporte 2 champs : un "id" et un "msg".


Il convient ensuite de déclarer une méthode de traitement d'erreur de la manière suivante :
myStore.on('exception', usrException);
A noter : dans cet exemple, on indique pour myStore que sur réception de l'évènement "exception", un appel à la méthode "usrException(...)" doit être fait. Dans la version 3 d'ExtJSdoc, l'évènement "loadexception" est indiqué comme obsolète (deprecated) et ne doit donc plus être utilisé.

Voici maintenant comment interpréter le retour en erreur lors de l'appel au service :
function usrException(dataProxy, type, action, options, response) {
// alert('usrException type=' + type
// + ' action=' + action
// + ' response.status=' + response.status);
if (type == 'response' && action == 'read' && response.status == 200) {
var rs = errorReader.read(response);
if(rs.records) {
for(var i = 0, len = rs.records.length; i < len; i++) {
var r = rs.records[i];
alert("Erreur de chargement ERR"
+ r.data.id + ":" + r.data.msg);
}
}
} else if (type == 'response' && action == 'read') {
alert("Connexion impossible au serveur ("
+ response.status +")");
}
}
A noter : dans cet exemple, on traite un cas d'erreur sur lecture du résultat. On utilise l'analyseur d'erreur précédemment évoqué pour interpréter le retour d'erreur de service en JSON et afficher une alerte sur chaque erreur lue.

Enfin, il ne manque plus que l'appel à "myStore" permettant de lancer le service :
myStore.load();


Si l'appel au service "getUsers" se passe correctement, alors le store pourra afficher le resultat au sein d'un Ext.grid.GridPanel par exemple, sinon la méthode "usrException" sera invoquée.

Ce mini tutoriel peut sûrement être complété, ou bien si vous avez une autre solution, je suis preneur !

En attendant, à vous de jouer!

1 commentaire:

Anonyme a dit…

I finally found my problem, its not json version.
This may seem stupid, but I was working locally on my Desktop and I was doing a Json request to the server (www.domain.com/json.php).

You can create your interface without been on server. But if you use form and submit.
Your website must also be on a server.

Enregistrer un commentaire

Mots clés du blog

acceptancetest androï Android androïd Android7 api appender appengine application applications archive array assistantematernelle astuce auth0 authentication authority automation Axis bash bearer blog bower build bundle c calendrier camille combal cdi certificate cf client cloudfoundry collaboratif command commandes connexion console css démasquées démasquer développement dll dump easter eggs écologie écrit employeur EMUI EMUI5.0 enfant évènement export-package ExtJS fiche find firefox gadget gelf gem git gmail gooelappengine google gparted gps graylog grenoble Grid gui harddrive heroku hover howto HTML http https IE ihm immobilier imprimante innovation insolite instance integration Java JavaScript jenkins jeu jobs json json-schema-validator key keystore labs linux livre log log4j logger logs lombok masquées masquer maven maven-gae-plugin Mémoire microsoft mobile mockito mondialisation monitor MUSE musique en ligne myopera nodejs npm NT NTEventLogger onglet openstack osgi paas package parameters parent php politique prosyst prototype proxies proxy quartz radio rappel recherche regex repository resize RIA rock route ruby rubygems s8500 samsung scheduler scm sel selenium Serializer server shared shell slf4j smartphone so société song spy ssh ssl struct swagger swig tâches téléphone téléréalité test thunderbird timeout token Tomcat tooltip tooltips truststore ubuntu unit test validator virgin virtualbox wave waze web WebApp wiki wikimedia wikipédia wikipen windows yahoo youtube yum