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!
