ember ajax
v4.0.1
Serviço para fazer solicitações AJAX em aplicações Ember.
ember-ajax agora está obsoleto. Considere usar ember-fetch ou ember-ajax-fetch como um substituto mais direto.
Se você está apenas começando, já tem ember-ajax instalado! No entanto, se estiver faltando no seu package.json , você pode adicioná-lo fazendo:
ember install ember-ajax Para usar o serviço ajax, injete o serviço ajax em sua rota ou componente.
import Ember from 'ember' ;
export default Ember . Route . extend ( {
ajax : Ember . inject . service ( ) ,
model ( ) {
return this . get ( 'ajax' ) . request ( '/posts' ) ;
}
} ) ; O serviço AJAX fornece métodos a serem usados para fazer solicitações AJAX, semelhantes à forma como você usaria jQuery.ajax . Na verdade, ember-ajax é um wrapper do método jQuery e pode ser configurado da mesma maneira.
Em geral, você usará o método request(url, options) , onde url é o destino da solicitação e options é um hash de configuração 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'
}
} ) ;
}
}
} ) ; Neste exemplo, this.get('ajax').request() retornará uma promessa com o resultado da solicitação. Seu código de manipulador dentro de .then ou .catch será automaticamente encapsulado em um loop de execução do Ember para máxima compatibilidade com o Ember, imediatamente.
Você pode pular a configuração do method ou type chaves em seu objeto options ao chamar request(url, options) chamando 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 permite especificar cabeçalhos a serem usados com uma solicitação. Isso é especialmente útil quando você tem um serviço de sessão que fornece um token de autenticação que deve ser incluído nas solicitações para autorizá-las.
Para incluir cabeçalhos personalizados a serem usados com suas solicitações, você pode especificar o hash headers no 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 ;
}
} )
} ) ; Os cabeçalhos por padrão só são passados se os hosts corresponderem ou se a solicitação for um caminho relativo. Você pode substituir esse comportamento passando um host com a solicitação, definindo o host para o serviço ajax ou definindo uma matriz de trustedHosts que pode ser uma matriz de strings ou expressões 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' ]
} ) ; A propriedade namespace pode ser usada para prefixar solicitações com um namespace 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') agora teria como alvo /api/v1/users/me
Se você precisar substituir o namespace para uma solicitação personalizada, use o namespace como uma opção para os métodos de solicitação.
// GET /api/legacy/users/me
request ( '/users/me' , { namespace : '/api/legacy' } ) ; ember-ajax permite que você especifique um host a ser usado com uma solicitação. Isso é especialmente útil para que você não precise passar continuamente o host junto com o caminho, tornando request() um pouco mais limpo.
Para incluir um host personalizado a ser usado com suas solicitações, você pode especificar a propriedade host no 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'
} ) ; Isso permite que você só precise fazer uma chamada para request() como tal:
// GET http://api.example.com/users/me
request ( '/users/me' ) ; ember-ajax permite que você especifique um cabeçalho Content-Type padrão a ser usado com uma solicitação.
Para incluir um Content-Type personalizado, você pode especificar a propriedade contentType no 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'
} ) ; Você também pode substituir o Content-Type por request pelo parâmetro options .
Algumas APIs respondem com o código de status 200, mesmo que tenha ocorrido um erro, e fornecem um código de status na carga útil. Com o serviço, você pode facilmente explicar esse comportamento substituindo o 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 fornece classes de erro integradas que você pode usar para verificar o erro que foi retornado pela resposta. Isso permite restringir a determinação do resultado do erro ao serviço, em vez de espalhá-lo pelo código.
ember-ajax possui tipos de erro integrados que serão retornados do serviço em caso de erro:
BadRequestError (400)UnauthorizedError (401)ForbiddenError (403)NotFoundError (404)InvalidError (422)ServerError (5XX)AbortErrorTimeoutError Todos os erros acima são subtipos de AjaxError .
ember-ajax vem com funções auxiliares para combinar erros de resposta com seus respectivos tipos de erro ember-ajax . Cada um dos erros listados acima possui uma função is* correspondente (por exemplo, isBadRequestError ).
O uso dessas funções é fortemente incentivado para ajudar a eliminar a necessidade de código padronizado de detecção de erros.
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 ;
} ) ;
}
} ) ;Se seus erros não forem padrão, a função auxiliar para esse tipo de erro poderá ser usada como base para criar sua função de detecção personalizada.
Se precisar acessar a resposta json de uma solicitação que falhou, você pode usar o método raw em vez de request .
this . get ( 'ajax' )
. raw ( url , options )
. then ( ( { response } ) => this . handleSuccess ( response ) )
. catch ( ( { response , jqXHR , payload } ) => this . handleError ( response ) ) ; Observe que neste caso de uso não há acesso ao objeto de erro. Você pode inspecionar o objeto jqXHR para obter informações adicionais sobre a solicitação com falha. Em particular, jqXHR.status retorna o código de erro HTTP relevante.
O Ember AJAX fornece um mixin que pode ser usado em um Ember Data Adapter para evitar o código de rede fornecido pelo Ember Data e, em vez disso, contar com o Ember AJAX. Isto serve como um primeiro passo para a verdadeira integração do Ember AJAX no Ember Data.
Para usar o mixin, você pode incluí-lo em um adaptador, assim:
// app/adapters/application.js
import DS from 'ember-data' ;
import AjaxServiceSupport from 'ember-ajax/mixins/ajax-support' ;
export default DS . JSONAPIAdapter . extend ( AjaxServiceSupport ) ;Essa é toda a configuração necessária! Se você quiser personalizar o adaptador, como usar um serviço AJAX alternativo (como um que você mesmo estendeu), serão fornecidos ganchos para fazer isso; confira a implementação do mixin para obter detalhes.
Observe que em vez de usar o código de verificação de erros do Ember Data em seu aplicativo, você deve usar aqueles fornecidos pelo Ember AJAX.
Se você não estiver usando o Ember Data e não tiver acesso aos serviços, poderá importar o utilitário ajax da seguinte forma:
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 ;
} ) ;
} Que terá a mesma API do serviço ajax . Se você deseja o objeto jQuery XHR bruto, você pode usar o 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 informação só é relevante se você deseja contribuir para ember-ajax .
git clone este repositórionpm installember serverember testember test --serverember buildPara obter mais informações sobre como usar o ember-cli, visite http://www.ember-cli.com/.
