ember ajax
v4.0.1
Service permettant de faire des requêtes AJAX dans les applications Ember.
ember-ajax est désormais obsolète. Veuillez envisager d'utiliser ember-fetch ou ember-ajax-fetch comme remplacement plus direct.
Si vous débutez, vous avez déjà installé ember-ajax ! Cependant, s'il est absent de votre package.json , vous pouvez l'ajouter en faisant :
ember install ember-ajax Pour utiliser le service ajax, injectez le service ajax dans votre route ou composant.
import Ember from 'ember' ;
export default Ember . Route . extend ( {
ajax : Ember . inject . service ( ) ,
model ( ) {
return this . get ( 'ajax' ) . request ( '/posts' ) ;
}
} ) ; Le service AJAX fournit des méthodes à utiliser pour effectuer des requêtes AJAX, de la même manière que vous utiliseriez jQuery.ajax . En fait, ember-ajax est un wrapper autour de la méthode jQuery et peut être configuré à peu près de la même manière.
En général, vous utiliserez la méthode request(url, options) , où url est la destination de la requête et options est un hachage de configuration pour jQuery.ajax .
import Ember from 'ember' ;
export default Ember . Controller . extend ( {
ajax : Ember . inject . service ( ) ,
actions : {
sendRequest ( ) {
return this . get ( 'ajax' ) . request ( '/posts' , {
method : 'POST' ,
data : {
foo : 'bar'
}
} ) ;
}
}
} ) ; Dans cet exemple, this.get('ajax').request() renverra une promesse avec le résultat de la requête. Votre code de gestionnaire à l'intérieur .then ou .catch sera automatiquement encapsulé dans une boucle d'exécution Ember pour une compatibilité maximale avec Ember, dès la sortie de la boîte.
Vous pouvez ignorer la définition de la method ou type des clés dans votre objet options lors de l'appel de request(url, options) en appelant à la place post(url, options) , put(url, options) , patch(url, options) ou del(url, options) .
post ( '/posts' , { data : { title : 'Ember' } } ) ; // Makes a POST request to /posts
put ( '/posts/1' , { data : { title : 'Ember' } } ) ; // Makes a PUT request to /posts/1
patch ( '/posts/1' , { data : { title : 'Ember' } } ) ; // Makes a PATCH request to /posts/1
del ( '/posts/1' ) ; // Makes a DELETE request to /posts/1 ember-ajax vous permet de spécifier les en-têtes à utiliser avec une requête. Ceci est particulièrement utile lorsque vous disposez d'un service de session qui fournit un jeton d'authentification que vous devez inclure dans les demandes pour autoriser vos demandes.
Pour inclure des en-têtes personnalisés à utiliser avec vos demandes, vous pouvez spécifier le hachage headers sur le Ajax Service .
// app/services/ajax.js
import Ember from 'ember' ;
import AjaxService from 'ember-ajax/services/ajax' ;
export default AjaxService . extend ( {
session : Ember . inject . service ( ) ,
headers : Ember . computed ( 'session.authToken' , {
get ( ) {
let headers = { } ;
const authToken = this . get ( 'session.authToken' ) ;
if ( authToken ) {
headers [ 'auth-token' ] = authToken ;
}
return headers ;
}
} )
} ) ; Les en-têtes par défaut ne sont transmis que si les hôtes correspondent ou si la demande est un chemin relatif. Vous pouvez remplacer ce comportement en transmettant un hôte avec la requête, en définissant l'hôte pour le service ajax ou en définissant un tableau de trustedHosts qui peut être un tableau de chaînes ou d'expressions régulières.
// app/services/ajax.js
import Ember from 'ember' ;
import AjaxService from 'ember-ajax/services/ajax' ;
export default AjaxService . extend ( {
trustedHosts : [ / .example. / , 'foo.bar.com' ]
} ) ; La propriété namespace peut être utilisée pour préfixer les requêtes avec un espace de noms d'URL spécifique.
// app/services/ajax.js
import Ember from 'ember' ;
import AjaxService from 'ember-ajax/services/ajax' ;
export default AjaxService . extend ( {
namespace : '/api/v1'
} ) ; request('/users/me') ciblerait désormais /api/v1/users/me
Si vous devez remplacer l'espace de noms pour une requête personnalisée, utilisez l' namespace comme option pour les méthodes de requête.
// GET /api/legacy/users/me
request ( '/users/me' , { namespace : '/api/legacy' } ) ; ember-ajax vous permet de spécifier un hôte à utiliser avec une requête. Ceci est particulièrement utile pour que vous n'ayez pas à transmettre continuellement l'hôte avec le chemin, ce qui rend request() un peu plus propre.
Pour inclure un hôte personnalisé à utiliser avec vos demandes, vous pouvez spécifier la propriété host sur le Ajax Service .
// app/services/ajax.js
import Ember from 'ember' ;
import AjaxService from 'ember-ajax/services/ajax' ;
export default AjaxService . extend ( {
host : 'http://api.example.com'
} ) ; Cela vous permet de n'avoir qu'à appeler request() en tant que tel :
// GET http://api.example.com/users/me
request ( '/users/me' ) ; ember-ajax vous permet de spécifier un en-tête Content-Type par défaut à utiliser avec une requête.
Pour inclure un Content-Type personnalisé, vous pouvez spécifier la propriété contentType sur le Ajax Service .
// app/services/ajax.js
import Ember from 'ember' ;
import AjaxService from 'ember-ajax/services/ajax' ;
export default AjaxService . extend ( {
contentType : 'application/json; charset=utf-8'
} ) ; Vous pouvez également remplacer le Content-Type par request avec le paramètre options .
Certaines API répondent avec le code d'état 200, même si une erreur s'est produite, et fournissent un code d'état dans la charge utile. Avec le service, vous pouvez facilement expliquer ce comportement en écrasant la méthode isSuccess .
// app/services/ajax.js
import AjaxService from 'ember-ajax/services/ajax' ;
export default AjaxService . extend ( {
isSuccess ( status , headers , payload ) {
let isSuccess = this . _super ( ... arguments ) ;
if ( isSuccess && payload . status ) {
// when status === 200 and payload has status property,
// check that payload.status is also considered a success request
return this . _super ( payload . status ) ;
}
return isSuccess ;
}
} ) ; ember-ajax fournit des classes d'erreur intégrées que vous pouvez utiliser pour vérifier l'erreur renvoyée par la réponse. Cela vous permet de limiter la détermination du résultat d'erreur au service au lieu de le disperser autour de votre code.
ember-ajax a des types d'erreur intégrés qui seront renvoyés par le service en cas d'erreur :
BadRequestError (400)UnauthorizedError (401)ForbiddenError (403)NotFoundError (404)InvalidError (422)ServerError (5XX)AbortErrorTimeoutError Toutes les erreurs ci-dessus sont des sous-types de AjaxError .
ember-ajax est livré avec des fonctions d'assistance pour faire correspondre les erreurs de réponse à leur type d'erreur ember-ajax respectif. Chacune des erreurs répertoriées ci-dessus a une fonction is* correspondante (par exemple, isBadRequestError ).
L'utilisation de ces fonctions est fortement encouragée pour aider à éliminer le besoin d'un code de détection d'erreur passe-partout.
import Ember from 'ember' ;
import {
isAjaxError ,
isNotFoundError ,
isForbiddenError
} from 'ember-ajax/errors' ;
export default Ember . Route . extend ( {
ajax : Ember . inject . service ( ) ,
model ( ) {
const ajax = this . get ( 'ajax' ) ;
return ajax . request ( '/user/doesnotexist' ) . catch ( function ( error ) {
if ( isNotFoundError ( error ) ) {
// handle 404 errors here
return ;
}
if ( isForbiddenError ( error ) ) {
// handle 403 errors here
return ;
}
if ( isAjaxError ( error ) ) {
// handle all other AjaxErrors here
return ;
}
// other errors are handled elsewhere
throw error ;
} ) ;
}
} ) ;Si vos erreurs ne sont pas standard, la fonction d'assistance pour ce type d'erreur peut être utilisée comme base pour créer votre fonction de détection personnalisée.
Si vous devez accéder à la réponse json d'une requête qui a échoué, vous pouvez utiliser la méthode raw au lieu de request .
this . get ( 'ajax' )
. raw ( url , options )
. then ( ( { response } ) => this . handleSuccess ( response ) )
. catch ( ( { response , jqXHR , payload } ) => this . handleError ( response ) ) ; Notez que dans ce cas d'utilisation, il n'y a pas d'accès à l'objet d'erreur. Vous pouvez inspecter l'objet jqXHR pour obtenir des informations supplémentaires sur la demande ayant échoué. En particulier, jqXHR.status renvoie le code d'erreur HTTP correspondant.
Ember AJAX fournit un mixin qui peut être utilisé dans un adaptateur de données Ember pour éviter le code réseau fourni par Ember Data et s'appuyer à la place sur Ember AJAX. Cela constitue une première étape vers une véritable intégration d’Ember AJAX dans Ember Data.
Pour utiliser le mixin, vous pouvez inclure le mixin dans un adaptateur, comme ceci :
// app/adapters/application.js
import DS from 'ember-data' ;
import AjaxServiceSupport from 'ember-ajax/mixins/ajax-support' ;
export default DS . JSONAPIAdapter . extend ( AjaxServiceSupport ) ;C'est toute la configuration requise ! Si vous souhaitez personnaliser l'adaptateur, par exemple en utilisant un service AJAX alternatif (comme celui que vous avez étendu vous-même), des hooks pour ce faire sont fournis ; consultez l'implémentation du mixin pour plus de détails.
Notez qu'au lieu d'utiliser le code de vérification des erreurs Ember Data dans votre application, vous devez utiliser ceux fournis par Ember AJAX.
Si vous n'utilisez pas Ember Data et n'avez pas accès aux services, vous pouvez importer l'utilitaire ajax comme ceci :
import request from 'ember-ajax/request' ;
export default function someUtility ( url ) {
var options = {
// request options
} ;
return request ( url , options ) . then ( response => {
// `response` is the data from the server
return response ;
} ) ;
} Qui aura la même API que le service ajax . Si vous voulez l'objet jQuery XHR brut, vous pouvez utiliser la méthode raw à la place :
import raw from 'ember-ajax/raw' ;
export default function someOtherUtility ( url ) {
var options = {
// raw options
} ;
return raw ( url , options ) . then ( result => {
// `result` is an object containing `response` and `jqXHR`, among other items
return result ;
} ) ;
} Ces informations ne sont pertinentes que si vous souhaitez contribuer à ember-ajax .
git clone ce dépôtnpm installember serverember testember test --serverember buildPour plus d'informations sur l'utilisation d'ember-cli, visitez http://www.ember-cli.com/.
