ember ajax
v4.0.1
Servicio para realizar solicitudes AJAX en aplicaciones Ember.
ember-ajax ahora está en desuso. Considere usar ember-fetch o ember-ajax-fetch como un reemplazo más directo.
Si recién estás comenzando, ¡ya tienes ember-ajax instalado! Sin embargo, si falta en su package.json , puede agregarlo haciendo:
ember install ember-ajax Para utilizar el servicio ajax, inyecte el servicio ajax en su ruta o componente.
import Ember from 'ember' ;
export default Ember . Route . extend ( {
ajax : Ember . inject . service ( ) ,
model ( ) {
return this . get ( 'ajax' ) . request ( '/posts' ) ;
}
} ) ; El servicio AJAX proporciona métodos que se utilizarán para realizar solicitudes AJAX, de forma similar a como usaría jQuery.ajax . De hecho, ember-ajax es un contenedor del método de jQuery y se puede configurar de la misma manera.
En general, utilizará el método request(url, options) , donde url es el destino de la solicitud y options es un hash de configuración para 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'
}
} ) ;
}
}
} ) ; En este ejemplo, this.get('ajax').request() devolverá una promesa con el resultado de la solicitud. Su código de controlador dentro de .then o .catch se incluirá automáticamente en un bucle de ejecución de Ember para una máxima compatibilidad con Ember, desde el primer momento.
Puede omitir la configuración del method o type claves en su objeto options al llamar request(url, options) llamando en su lugar post(url, options) , put(url, options) , patch(url, options) o 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 le permite especificar los encabezados que se utilizarán con una solicitud. Esto es especialmente útil cuando tiene un servicio de sesión que proporciona un token de autenticación que debe incluir con las solicitudes para autorizar sus solicitudes.
Para incluir encabezados personalizados que se utilizarán con sus solicitudes, puede especificar el hash headers en el 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 ;
}
} )
} ) ; Los encabezados de forma predeterminada solo se pasan si los hosts coinciden o si la solicitud es una ruta relativa. Puede sobrescribir este comportamiento pasando un host con la solicitud, configurando el host para el servicio ajax o configurando una matriz de trustedHosts que pueden ser una matriz de cadenas o expresiones regulares.
// 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 propiedad namespace se puede utilizar para anteponer solicitudes con un espacio de nombres de URL específico.
// 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') ahora apuntaría /api/v1/users/me
Si necesita anular el espacio de nombres para una solicitud personalizada, utilice el namespace como una opción para los métodos de solicitud.
// GET /api/legacy/users/me
request ( '/users/me' , { namespace : '/api/legacy' } ) ; ember-ajax le permite especificar un host que se utilizará con una solicitud. Esto es especialmente útil para que no tenga que pasar continuamente el host junto con la ruta, lo que hace que request() sea un poco más limpio.
Para incluir un host personalizado para usar con sus solicitudes, puede especificar la propiedad host en el 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'
} ) ; Eso le permite solo tener que hacer una llamada a request() como tal:
// GET http://api.example.com/users/me
request ( '/users/me' ) ; ember-ajax le permite especificar un encabezado de tipo de contenido predeterminado para usar con una solicitud.
Para incluir un tipo de contenido personalizado, puede especificar la propiedad contentType en el 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'
} ) ; También puede anular el tipo de contenido por request con el parámetro options .
Algunas API responden con el código de estado 200, aunque se haya producido un error, y proporcionan un código de estado en la carga útil. Con el servicio, puedes dar cuenta fácilmente de este comportamiento sobrescribiendo el método 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 proporciona clases de error integradas que puede usar para verificar el error devuelto por la respuesta. Esto le permite restringir la determinación del resultado del error al servicio en lugar de distribuirlo alrededor de su código.
ember-ajax tiene tipos de error integrados que el servicio devolverá en caso de error:
BadRequestError (400)UnauthorizedError (401)ForbiddenError (403)NotFoundError (404)InvalidError (422)ServerError (5XX)AbortErrorTimeoutError Todos los errores anteriores son subtipos de AjaxError .
ember-ajax viene con funciones de ayuda para hacer coincidir los errores de respuesta con su respectivo tipo de error ember-ajax . Cada uno de los errores enumerados anteriormente tiene una función is* correspondiente (por ejemplo, isBadRequestError ).
Se recomienda encarecidamente el uso de estas funciones para ayudar a eliminar la necesidad de un código de detección de errores repetitivo.
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 sus errores no son estándar, la función auxiliar para ese tipo de error se puede utilizar como base para crear su función de detección personalizada.
Si necesita acceder a la respuesta json de una solicitud que falló, puede usar el método raw en lugar de request .
this . get ( 'ajax' )
. raw ( url , options )
. then ( ( { response } ) => this . handleSuccess ( response ) )
. catch ( ( { response , jqXHR , payload } ) => this . handleError ( response ) ) ; Tenga en cuenta que en este caso de uso no hay acceso al objeto de error. Puede inspeccionar el objeto jqXHR para obtener información adicional sobre la solicitud fallida. En particular, jqXHR.status devuelve el código de error HTTP relevante.
Ember AJAX proporciona un mixin que se puede usar en un adaptador de datos Ember para evitar el código de red proporcionado por Ember Data y confiar en Ember AJAX en su lugar. Esto sirve como un primer paso hacia una verdadera integración de Ember AJAX en Ember Data.
Para usar el mixin, puedes incluirlo en un Adaptador, así:
// app/adapters/application.js
import DS from 'ember-data' ;
import AjaxServiceSupport from 'ember-ajax/mixins/ajax-support' ;
export default DS . JSONAPIAdapter . extend ( AjaxServiceSupport ) ;¡Esa es toda la configuración requerida! Si desea personalizar el adaptador, como por ejemplo utilizar un servicio AJAX alternativo (como uno que usted mismo extendió), se proporcionan enlaces para hacerlo; Consulte la implementación del mixin para obtener más detalles.
Tenga en cuenta que en lugar de utilizar el código de comprobación de errores de Ember Data en su aplicación, debe utilizar los proporcionados por Ember AJAX.
Si no está utilizando Ember Data y no tiene acceso a los servicios, puede importar la utilidad ajax de esta manera:
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 ;
} ) ;
} El cual tendrá la misma API que el servicio ajax . Si desea el objeto jQuery XHR sin formato, puede utilizar el método raw :
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 ;
} ) ;
} Esta información solo es relevante si desea contribuir a ember-ajax .
git clone este repositorionpm installember serverember testember test --serverember buildPara obtener más información sobre el uso de ember-cli, visite http://www.ember-cli.com/.
