ember ajax
v4.0.1
Ember 애플리케이션에서 AJAX 요청을 작성하기 위한 서비스입니다.
ember-ajax 이제 더 이상 사용되지 않습니다. 보다 직접적인 대체 방법으로 ember-fetch 또는 ember-ajax-fetch 사용을 고려해 보세요.
방금 시작했다면 이미 ember-ajax 설치되어 있을 것입니다! 그러나 package.json 에 누락된 경우 다음을 수행하여 추가할 수 있습니다.
ember install ember-ajax ajax 서비스를 사용하려면 경로나 구성 요소에 ajax 서비스를 삽입하세요.
import Ember from 'ember' ;
export default Ember . Route . extend ( {
ajax : Ember . inject . service ( ) ,
model ( ) {
return this . get ( 'ajax' ) . request ( '/posts' ) ;
}
} ) ; AJAX 서비스는 jQuery.ajax 사용하는 방식과 유사하게 AJAX 요청을 만드는 데 사용되는 메서드를 제공합니다. 실제로 ember-ajax jQuery 메서드를 둘러싼 래퍼이며 거의 동일한 방식으로 구성할 수 있습니다.
일반적으로 request(url, options) 메서드를 사용합니다. 여기서 url 요청 대상이고 options 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'
}
} ) ;
}
}
} ) ; 이 예에서 this.get('ajax').request() 요청 결과와 함께 Promise를 반환합니다. .then 또는 .catch 내부의 핸들러 코드는 Ember와의 호환성을 극대화하기 위해 자동으로 Ember 실행 루프에 래핑됩니다.
request(url, options) 호출할 때 post(url, options) , put(url, options) , patch(url, options) 또는 del(url, options) ) 을 대신 호출하여 options 개체에 method 또는 type 키 설정을 건너뛸 수 있습니다. 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 사용하면 요청에 사용할 헤더를 지정할 수 있습니다. 이는 요청을 승인하기 위해 요청에 포함해야 하는 인증 토큰을 제공하는 세션 서비스가 있는 경우 특히 유용합니다.
요청에 사용할 사용자 정의 헤더를 포함하려면 Ajax Service 에 headers 해시를 지정할 수 있습니다.
// 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 ;
}
} )
} ) ; 기본적으로 헤더는 호스트가 일치하거나 요청이 상대 경로인 경우에만 전달됩니다. 요청과 함께 호스트를 전달하거나, ajax 서비스에 대한 호스트를 설정하거나, 문자열 배열 또는 regexe일 수 있는 trustedHosts 배열을 설정하여 이 동작을 덮어쓸 수 있습니다.
// app/services/ajax.js
import Ember from 'ember' ;
import AjaxService from 'ember-ajax/services/ajax' ;
export default AjaxService . extend ( {
trustedHosts : [ / .example. / , 'foo.bar.com' ]
} ) ; namespace 속성을 사용하여 요청 앞에 특정 URL 네임스페이스를 붙일 수 있습니다.
// 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') 이제 /api/v1/users/me 대상으로 합니다.
사용자 지정 요청에 대한 네임스페이스를 재정의해야 하는 경우 해당 namespace 요청 메서드에 대한 옵션으로 사용하세요.
// GET /api/legacy/users/me
request ( '/users/me' , { namespace : '/api/legacy' } ) ; ember-ajax 하면 요청에 사용할 호스트를 지정할 수 있습니다. 이는 특히 유용하므로 경로와 함께 호스트를 계속해서 전달할 필요가 없으므로 request() 좀 더 깔끔해집니다.
요청에 사용할 사용자 정의 호스트를 포함하려면 Ajax Service 에서 host 속성을 지정할 수 있습니다.
// app/services/ajax.js
import Ember from 'ember' ;
import AjaxService from 'ember-ajax/services/ajax' ;
export default AjaxService . extend ( {
host : 'http://api.example.com'
} ) ; 이렇게 하면 다음과 같이 request() 만 호출하면 됩니다.
// GET http://api.example.com/users/me
request ( '/users/me' ) ; ember-ajax 사용하면 요청에 사용할 기본 Content-Type 헤더를 지정할 수 있습니다.
사용자 정의 Content-Type을 포함하려면 Ajax Service 에 contentType 속성을 지정할 수 있습니다.
// 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'
} ) ; options 매개변수를 사용하여 request 당 Content-Type을 재정의할 수도 있습니다.
일부 API는 오류가 발생한 경우에도 상태 코드 200으로 응답하고 페이로드에 상태 코드를 제공합니다. 서비스를 사용하면 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 응답에서 반환된 오류를 확인하는 데 사용할 수 있는 내장 오류 클래스를 제공합니다. 이를 통해 오류 결과 결정을 코드 주위에 뿌리는 대신 서비스로 제한할 수 있습니다.
ember-ajax 오류 발생 시 서비스에서 반환되는 오류 유형이 내장되어 있습니다.
BadRequestError (400)UnauthorizedError (401)ForbiddenError (403)NotFoundError (404)InvalidError (422)ServerError (5XX)AbortErrorTimeoutError 위의 모든 오류는 AjaxError 의 하위 유형입니다.
ember-ajax 응답 오류를 해당 ember-ajax 오류 유형과 일치시키는 도우미 기능이 제공됩니다. 위에 나열된 각 오류에는 해당 is* 함수가 있습니다(예: isBadRequestError ).
상용구 오류 감지 코드가 필요하지 않도록 하려면 이러한 기능을 사용하는 것이 좋습니다 .
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 ;
} ) ;
}
} ) ;오류가 표준이 아닌 경우 해당 오류 유형에 대한 도우미 함수를 기반으로 사용하여 사용자 지정 감지 기능을 구축할 수 있습니다.
실패한 요청의 json 응답에 액세스해야 하는 경우 request 대신 raw 메서드를 사용할 수 있습니다.
this . get ( 'ajax' )
. raw ( url , options )
. then ( ( { response } ) => this . handleSuccess ( response ) )
. catch ( ( { response , jqXHR , payload } ) => this . handleError ( response ) ) ; 이 사용 사례에서는 오류 개체에 액세스할 수 없습니다. 실패한 요청에 대한 추가 정보를 보려면 jqXHR 개체를 검사할 수 있습니다. 특히 jqXHR.status 관련 HTTP 오류 코드를 반환합니다.
Ember AJAX는 Ember Data에서 제공하는 네트워킹 코드를 피하고 대신 Ember AJAX를 사용하기 위해 Ember 데이터 어댑터에서 사용할 수 있는 믹스인을 제공합니다. 이는 Ember AJAX를 Ember Data에 통합하기 위한 첫 번째 단계입니다.
믹스인을 사용하려면 다음과 같이 믹스인을 어댑터에 포함할 수 있습니다.
// app/adapters/application.js
import DS from 'ember-data' ;
import AjaxServiceSupport from 'ember-ajax/mixins/ajax-support' ;
export default DS . JSONAPIAdapter . extend ( AjaxServiceSupport ) ;이것이 필요한 모든 구성입니다! 대체 AJAX 서비스(예: 직접 확장한 서비스)를 사용하는 등 어댑터를 사용자 정의하려는 경우 이를 위한 후크가 제공됩니다. 자세한 내용은 믹스인 구현을 확인하세요.
애플리케이션에서 Ember Data 오류 검사 코드를 사용하는 대신 Ember AJAX에서 제공하는 코드를 사용해야 합니다.
Ember Data를 사용하지 않고 서비스에 액세스할 수 없는 경우 다음과 같이 ajax 유틸리티를 가져올 수 있습니다.
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 ;
} ) ;
} ajax 서비스와 동일한 API를 갖게 됩니다. 원시 jQuery XHR 객체를 원하면 대신 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 ;
} ) ;
} 이 정보는 ember-ajax 에 기여하려는 경우에만 관련됩니다.
git clonenpm installember serverember testember test --serverember buildember-cli 사용에 대한 자세한 내용을 보려면 http://www.ember-cli.com/을 방문하세요.
