ember ajax
v4.0.1
Dienst zum Stellen von AJAX-Anfragen in Ember-Anwendungen.
ember-ajax ist jetzt veraltet. Bitte erwägen Sie die Verwendung ember-fetch oder ember-ajax-fetch als direkteren Ersatz.
Wenn Sie gerade erst anfangen, haben Sie ember-ajax bereits installiert! Wenn es jedoch in Ihrer package.json fehlt, können Sie es wie folgt hinzufügen:
ember install ember-ajax Um den Ajax-Dienst zu verwenden, fügen Sie den ajax Dienst in Ihre Route oder Komponente ein.
import Ember from 'ember' ;
export default Ember . Route . extend ( {
ajax : Ember . inject . service ( ) ,
model ( ) {
return this . get ( 'ajax' ) . request ( '/posts' ) ;
}
} ) ; Der AJAX-Dienst stellt Methoden bereit, mit denen AJAX-Anfragen gestellt werden können, ähnlich wie Sie jQuery.ajax verwenden würden. Tatsächlich ist ember-ajax ein Wrapper um die Methode von jQuery und kann auf die gleiche Weise konfiguriert werden.
Im Allgemeinen verwenden Sie die Methode request(url, options) , wobei url das Ziel der Anfrage und options ein Konfigurations-Hash für jQuery.ajax ist.
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'
}
} ) ;
}
}
} ) ; In diesem Beispiel gibt this.get('ajax').request() ein Versprechen mit dem Ergebnis der Anfrage zurück. Ihr Handler-Code in .then oder .catch wird automatisch in eine Ember-Laufschleife eingeschlossen, um maximale Kompatibilität mit Ember zu gewährleisten, und zwar direkt nach dem Auspacken.
Sie können das Festlegen der method oder type in Ihrem options überspringen, wenn Sie request(url, options) aufrufen, indem Sie stattdessen post(url, options) , put(url, options) , patch(url, options) oder del(url, options) aufrufen 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 können Sie Header angeben, die mit einer Anfrage verwendet werden sollen. Dies ist besonders hilfreich, wenn Sie über einen Sitzungsdienst verfügen, der ein Authentifizierungstoken bereitstellt, das Sie in die Anfragen einschließen müssen, um Ihre Anfragen zu autorisieren.
Um benutzerdefinierte Header zur Verwendung mit Ihren Anfragen einzuschließen, können Sie im Ajax Service headers Hash angeben.
// 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 ;
}
} )
} ) ; Header werden standardmäßig nur übergeben, wenn die Hosts übereinstimmen oder die Anforderung ein relativer Pfad ist. Sie können dieses Verhalten überschreiben, indem Sie entweder einen Host mit der Anfrage übergeben, den Host für den Ajax-Dienst festlegen oder ein Array von trustedHosts festlegen, bei dem es sich entweder um ein Array aus Zeichenfolgen oder regulären Ausdrücken handeln kann.
// app/services/ajax.js
import Ember from 'ember' ;
import AjaxService from 'ember-ajax/services/ajax' ;
export default AjaxService . extend ( {
trustedHosts : [ / .example. / , 'foo.bar.com' ]
} ) ; Die namespace Eigenschaft kann verwendet werden, um Anfragen einen bestimmten URL-Namespace voranzustellen.
// 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') würde jetzt auf /api/v1/users/me abzielen
Wenn Sie den Namespace für eine benutzerdefinierte Anfrage überschreiben müssen, verwenden Sie den namespace als Option für die Anfragemethoden.
// GET /api/legacy/users/me
request ( '/users/me' , { namespace : '/api/legacy' } ) ; ember-ajax können Sie einen Host angeben, der mit einer Anfrage verwendet werden soll. Dies ist besonders hilfreich, damit Sie nicht ständig den Host zusammen mit dem Pfad übergeben müssen, was request() etwas sauberer macht.
Um einen benutzerdefinierten Host zur Verwendung mit Ihren Anfragen einzuschließen, können Sie host im Ajax Service angeben.
// app/services/ajax.js
import Ember from 'ember' ;
import AjaxService from 'ember-ajax/services/ajax' ;
export default AjaxService . extend ( {
host : 'http://api.example.com'
} ) ; Dadurch müssen Sie nur request() als solches aufrufen:
// GET http://api.example.com/users/me
request ( '/users/me' ) ; ember-ajax können Sie einen Standard-Content-Type-Header angeben, der mit einer Anfrage verwendet werden soll.
Um einen benutzerdefinierten Inhaltstyp einzubinden, können Sie contentType Eigenschaft im Ajax Service angeben.
// 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'
} ) ; Sie können den Content-Type auch pro request mit dem options überschreiben.
Einige APIs antworten mit dem Statuscode 200, obwohl ein Fehler aufgetreten ist, und stellen einen Statuscode in der Nutzlast bereit. Mit dem Dienst können Sie dieses Verhalten leicht berücksichtigen, indem Sie die isSuccess -Methode überschreiben.
// 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 bietet integrierte Fehlerklassen, mit denen Sie den von der Antwort zurückgegebenen Fehler überprüfen können. Dadurch können Sie die Bestimmung des Fehlerergebnisses auf den Dienst beschränken, anstatt es auf Ihren Code zu verteilen.
ember-ajax verfügt über integrierte Fehlertypen, die im Fehlerfall vom Dienst zurückgegeben werden:
BadRequestError (400)UnauthorizedError (401)ForbiddenError (403)NotFoundError (404)InvalidError (422)ServerError (5XX)AbortErrorTimeoutError Alle oben genannten Fehler sind Untertypen von AjaxError .
ember-ajax verfügt über Hilfsfunktionen zum Zuordnen von Antwortfehlern zu ihrem jeweiligen ember-ajax Fehlertyp. Für jeden der oben aufgeführten Fehler gibt es eine entsprechende is* -Funktion (z. B. isBadRequestError ).
Die Verwendung dieser Funktionen wird dringend empfohlen, um den Bedarf an vorgefertigtem Fehlererkennungscode zu eliminieren.
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 ;
} ) ;
}
} ) ;Wenn es sich bei Ihren Fehlern nicht um Standardfehler handelt, kann die Hilfsfunktion für diesen Fehlertyp als Grundlage für die Erstellung Ihrer benutzerdefinierten Erkennungsfunktion verwendet werden.
Wenn Sie auf die JSON-Antwort einer fehlgeschlagenen Anfrage zugreifen müssen, können Sie die raw -Methode anstelle von request verwenden.
this . get ( 'ajax' )
. raw ( url , options )
. then ( ( { response } ) => this . handleSuccess ( response ) )
. catch ( ( { response , jqXHR , payload } ) => this . handleError ( response ) ) ; Beachten Sie, dass in diesem Anwendungsfall kein Zugriff auf das Fehlerobjekt besteht. Sie können das jqXHR Objekt auf zusätzliche Informationen zur fehlgeschlagenen Anfrage untersuchen. Insbesondere gibt jqXHR.status den relevanten HTTP-Fehlercode zurück.
Ember AJAX bietet ein Mixin, das in einem Ember Data Adapter verwendet werden kann, um den von Ember Data bereitgestellten Netzwerkcode zu vermeiden und sich stattdessen auf Ember AJAX zu verlassen. Dies dient als erster Schritt zur echten Integration von Ember AJAX in Ember Data.
Um das Mixin zu verwenden, können Sie das Mixin wie folgt in einen Adapter einbinden:
// app/adapters/application.js
import DS from 'ember-data' ;
import AjaxServiceSupport from 'ember-ajax/mixins/ajax-support' ;
export default DS . JSONAPIAdapter . extend ( AjaxServiceSupport ) ;Das ist die gesamte erforderliche Konfiguration! Wenn Sie den Adapter anpassen möchten, z. B. mithilfe eines alternativen AJAX-Dienstes (z. B. eines, den Sie selbst erweitert haben), werden dafür Hooks bereitgestellt. Weitere Informationen finden Sie in der Implementierung des Mixins.
Beachten Sie, dass Sie in Ihrer Anwendung nicht den Fehlerprüfcode von Ember Data, sondern den von Ember AJAX bereitgestellten Code verwenden sollten.
Wenn Sie Ember Data nicht verwenden und keinen Zugriff auf Dienste haben, können Sie das Ajax-Dienstprogramm wie folgt importieren:
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 ;
} ) ;
} Welches wird die gleiche API wie der ajax -Dienst haben. Wenn Sie das rohe jQuery-XHR-Objekt benötigen, können Sie stattdessen die raw Methode verwenden:
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 ;
} ) ;
} Diese Informationen sind nur relevant, wenn Sie einen Beitrag zu ember-ajax leisten möchten.
git clone dieses Repositorynpm installember serverember testember test --serverember buildWeitere Informationen zur Verwendung von ember-cli finden Sie unter http://www.ember-cli.com/.
