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 服務提供了用於發出 AJAX 請求的方法，類似於使用jQuery.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物件中設定method或type鍵，而是呼叫post(url, options) 、 put(url, options) 、 patch(url, options)或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 回應，可以使用raw方法而不是request 。
this . get ( 'ajax' )
. raw ( url , options )
. then ( ( { response } ) => this . handleSuccess ( response ) )
. catch ( ( { response , jqXHR , payload } ) => this . handleError ( response ) ) ;請注意，在此用例中無法存取錯誤物件。您可以檢查jqXHR物件以取得有關失敗請求的其他資訊。特別是jqXHR.status傳回相關的 HTTP 錯誤代碼。
Ember AJAX 提供了一個 mixin，可在 Ember 資料適配器中使用，以避免 Ember Data 提供的網路程式碼並依賴 Ember AJAX。這是將 Ember AJAX 真正整合到 Ember Data 中的第一步。
要使用 mixin，您可以將 mixin 包含到 Adapter 中，如下所示：
// 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 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 clone這個儲存庫npm installember serverember testember test --serverember build有關使用 ember-cli 的更多信息，請訪問 http://www.ember-cli.com/。
