ember ajax
v4.0.1
Layanan untuk membuat permintaan AJAX di aplikasi Ember.
ember-ajax sekarang sudah tidak digunakan lagi. Harap pertimbangkan untuk menggunakan ember-fetch , atau ember-ajax-fetch sebagai pengganti yang lebih langsung.
Jika Anda baru memulai, Anda sudah menginstal ember-ajax ! Namun, jika tidak ada di package.json Anda, Anda dapat menambahkannya dengan melakukan:
ember install ember-ajax Untuk menggunakan layanan ajax, masukkan layanan ajax ke rute atau komponen Anda.
import Ember from 'ember' ;
export default Ember . Route . extend ( {
ajax : Ember . inject . service ( ) ,
model ( ) {
return this . get ( 'ajax' ) . request ( '/posts' ) ;
}
} ) ; Layanan AJAX menyediakan metode yang digunakan untuk membuat permintaan AJAX, mirip dengan cara Anda menggunakan jQuery.ajax . Faktanya, ember-ajax adalah pembungkus metode jQuery, dan dapat dikonfigurasi dengan cara yang hampir sama.
Secara umum, Anda akan menggunakan metode request(url, options) , di mana url adalah tujuan permintaan dan options adalah hash konfigurasi untuk 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'
}
} ) ;
}
}
} ) ; Dalam contoh ini, this.get('ajax').request() akan mengembalikan janji dengan hasil permintaan. Kode handler Anda di dalam .then atau .catch akan secara otomatis dibungkus dalam loop proses Ember untuk kompatibilitas maksimum dengan Ember, langsung dari kotaknya.
Anda dapat melewati pengaturan method atau type kunci di objek options Anda saat memanggil request(url, options) dengan memanggil post(url, options) , put(url, options) , patch(url, options) atau 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 memungkinkan Anda menentukan header yang akan digunakan dengan permintaan. Hal ini sangat berguna ketika Anda memiliki layanan sesi yang menyediakan token autentikasi yang harus Anda sertakan dalam permintaan untuk mengotorisasi permintaan Anda.
Untuk menyertakan header khusus yang akan digunakan dengan permintaan Anda, Anda dapat menentukan hash headers pada 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 ;
}
} )
} ) ; Header secara default hanya diteruskan jika hostnya cocok, atau permintaannya adalah jalur relatif. Anda dapat menimpa perilaku ini dengan meneruskan host bersama permintaan, mengatur host untuk layanan ajax, atau dengan mengatur array trustedHosts yang dapat berupa array string atau regex.
// app/services/ajax.js
import Ember from 'ember' ;
import AjaxService from 'ember-ajax/services/ajax' ;
export default AjaxService . extend ( {
trustedHosts : [ / .example. / , 'foo.bar.com' ]
} ) ; Properti namespace dapat digunakan untuk mengawali permintaan dengan namespace url tertentu.
// 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') sekarang akan menargetkan /api/v1/users/me
Jika Anda perlu mengganti namespace untuk permintaan khusus, gunakan namespace sebagai opsi pada metode permintaan.
// GET /api/legacy/users/me
request ( '/users/me' , { namespace : '/api/legacy' } ) ; ember-ajax memungkinkan Anda menentukan host yang akan digunakan dengan permintaan. Ini sangat membantu sehingga Anda tidak perlu terus-menerus meneruskan host beserta jalurnya, membuat request() sedikit lebih bersih.
Untuk menyertakan host khusus yang akan digunakan dengan permintaan Anda, Anda dapat menentukan properti host di 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'
} ) ; Itu memungkinkan Anda hanya perlu melakukan panggilan ke request() seperti:
// GET http://api.example.com/users/me
request ( '/users/me' ) ; ember-ajax memungkinkan Anda menentukan header Tipe Konten default untuk digunakan dengan permintaan.
Untuk menyertakan Tipe Konten khusus, Anda dapat menentukan properti contentType di 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'
} ) ; Anda juga dapat mengganti Tipe Konten per request dengan parameter options .
Beberapa API merespons dengan kode status 200, meskipun telah terjadi kesalahan dan memberikan kode status di payload. Dengan layanan ini, Anda dapat dengan mudah menjelaskan perilaku ini dengan menimpa metode 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 menyediakan kelas kesalahan bawaan yang dapat Anda gunakan untuk memeriksa kesalahan yang dihasilkan oleh respons. Hal ini memungkinkan Anda membatasi penentuan hasil kesalahan pada layanan alih-alih menyebarkannya ke sekitar kode Anda.
ember-ajax memiliki tipe kesalahan bawaan yang akan dikembalikan dari layanan jika terjadi kesalahan:
BadRequestError (400)UnauthorizedError (401)ForbiddenError (403)NotFoundError (404)InvalidError (422)ServerError (5XX)AbortErrorTimeoutError Semua kesalahan di atas adalah subtipe dari AjaxError .
ember-ajax hadir dengan fungsi pembantu untuk mencocokkan kesalahan respons dengan jenis kesalahan ember-ajax masing-masing. Masing-masing kesalahan yang tercantum di atas memiliki fungsi is* yang sesuai (misalnya, isBadRequestError ).
Penggunaan fungsi-fungsi ini sangat dianjurkan untuk membantu menghilangkan kebutuhan akan kode deteksi kesalahan boilerplate.
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 ;
} ) ;
}
} ) ;Jika kesalahan Anda tidak standar, fungsi pembantu untuk jenis kesalahan tersebut dapat digunakan sebagai dasar untuk membangun fungsi deteksi kustom Anda.
Jika Anda perlu mengakses respons json dari permintaan yang gagal, Anda dapat menggunakan metode raw alih-alih request .
this . get ( 'ajax' )
. raw ( url , options )
. then ( ( { response } ) => this . handleSuccess ( response ) )
. catch ( ( { response , jqXHR , payload } ) => this . handleError ( response ) ) ; Perhatikan bahwa dalam kasus penggunaan ini tidak ada akses ke objek kesalahan. Anda dapat memeriksa objek jqXHR untuk informasi tambahan tentang permintaan yang gagal. Khususnya jqXHR.status mengembalikan kode kesalahan HTTP yang relevan.
Ember AJAX menyediakan mixin yang dapat digunakan dalam Adaptor Data Ember untuk menghindari kode jaringan yang disediakan oleh Ember Data dan mengandalkan Ember AJAX sebagai gantinya. Ini berfungsi sebagai langkah pertama menuju integrasi sebenarnya Ember AJAX ke dalam Ember Data.
Untuk menggunakan mixin, Anda dapat memasukkan mixin ke dalam Adaptor, seperti:
// app/adapters/application.js
import DS from 'ember-data' ;
import AjaxServiceSupport from 'ember-ajax/mixins/ajax-support' ;
export default DS . JSONAPIAdapter . extend ( AjaxServiceSupport ) ;Itu saja konfigurasi yang diperlukan! Jika Anda ingin menyesuaikan adaptor, seperti menggunakan layanan AJAX alternatif (seperti yang Anda kembangkan sendiri), tersedia kaitan untuk melakukannya; lihat implementasi mixin untuk detailnya.
Perhatikan bahwa alih-alih menggunakan kode pemeriksaan kesalahan Ember Data di aplikasi Anda, Anda harus menggunakan kode yang disediakan oleh Ember AJAX.
Jika Anda tidak menggunakan Ember Data dan tidak memiliki akses ke layanan, Anda dapat mengimpor utilitas ajax seperti:
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 ;
} ) ;
} Yang akan memiliki API yang sama dengan layanan ajax . Jika Anda menginginkan objek jQuery XHR mentah maka Anda dapat menggunakan metode raw sebagai gantinya:
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 ;
} ) ;
} Informasi ini hanya relevan jika Anda ingin berkontribusi pada ember-ajax .
git clone repositori ininpm installember serverember testember test --serverember buildUntuk informasi lebih lanjut tentang penggunaan ember-cli, kunjungi http://www.ember-cli.com/.
