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 เป็น wrapper ของเมธอดของ 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) แทน 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 ที่สามารถเป็นอาร์เรย์ของสตริงหรือ regexes ก็ได้
// 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 Data Adapter เพื่อหลีกเลี่ยงโค้ดเครือข่ายที่ 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 ทางเลือก (เช่นเดียวกับที่คุณขยายเอง) จะมีการจัดหา hooks ให้ทำดังนี้ ตรวจสอบการใช้งานของมิกซ์อินเพื่อดูรายละเอียด
โปรดทราบว่าแทนที่จะใช้โค้ดตรวจสอบข้อผิดพลาดของ 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/
