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) options呼び出すときに、代わりにpost(url, options) 、 put(url, options) 、 patch(url, options) 、またはdel(url, options) ) type呼び出すことで、 methodの設定をスキップしたり、オプション オブジェクトにキーを入力したりできます。 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/1ember-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 サービスのホストを設定するか、文字列または正規表現の配列である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 Data アダプターで使用できるミックスインを提供します。これは、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 サービス (自分で拡張したものなど) を使用するなど、アダプターをカスタマイズする場合は、そのためのフックが提供されます。詳細については、mixin の実装を確認してください。
アプリケーションで Ember データ エラー チェック コードを使用する代わりに、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/ を参照してください。
