ember ajax
v4.0.1
Сервис для выполнения AJAX-запросов в приложениях Ember.
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() вернет обещание с результатом запроса. Ваш код обработчика внутри .then или .catch будет автоматически заключен в цикл выполнения Ember для максимальной совместимости с Ember прямо из коробки.
Вы можете пропустить установку ключей method или type в вашем объекте options при вызове request(url, options) , вместо этого вызывая 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/1 ember-ajax позволяет вам указать заголовки, которые будут использоваться с запросом. Это особенно полезно, если у вас есть служба сеансов, предоставляющая токен аутентификации, который вам необходимо включать в запросы для авторизации ваших запросов.
Чтобы включить пользовательские заголовки, которые будут использоваться с вашими запросами, вы можете указать хэш headers в 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 ;
}
} )
} ) ; Заголовки по умолчанию передаются только в том случае, если хосты совпадают или запрос имеет относительный путь. Вы можете перезаписать это поведение, передав хост вместе с запросом, установив хост для службы 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() немного чище.
Чтобы включить собственный хост, который будет использоваться с вашими запросами, вы можете указать свойство host в 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'
} ) ; Это позволяет вам только вызвать request() как таковой:
// GET http://api.example.com/users/me
request ( '/users/me' ) ; ember-ajax позволяет вам указать заголовок Content-Type по умолчанию, который будет использоваться с запросом.
Чтобы включить пользовательский Content-Type, вы можете указать свойство contentType в 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'
} ) ; Вы также можете переопределить Content-Type для каждого request с помощью параметра options .
Некоторые 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 предоставляет примесь, которую можно использовать в адаптере данных Ember, чтобы избежать сетевого кода, предоставляемого Ember Data, и вместо этого полагаться на Ember AJAX. Это станет первым шагом на пути к настоящей интеграции 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 ;
} ) ;
} Который будет иметь тот же API, что и служба ajax . Если вам нужен необработанный объект 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/.
