ember ajax

جمرة اياكس

خدمة تقديم طلبات AJAX في تطبيقات Ember.

• خدمة قابلة للتخصيص
• إرجاع وعود RSVP
• تحسين معالجة الأخطاء
• القدرة على تحديد رؤوس الطلب

️ مهمل

تم الآن إهمال 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، بمجرد إخراجها من الصندوق.

أساليب HTTP الفعل

يمكنك تخطي تعيين 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 التي يمكن أن تكون إما مصفوفة من السلاسل أو التعبيرات المنطقية.

 // 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 تحديد رأس نوع المحتوى الافتراضي لاستخدامه مع الطلب.

لتضمين نوع محتوى مخصص، يمكنك تحديد خاصية 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'
} ) ;

يمكنك أيضًا تجاوز نوع المحتوى لكل request باستخدام معلمة options .

تخصيص هو النجاح

تستجيب بعض واجهات برمجة التطبيقات برمز الحالة 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)
• AbortError
• TimeoutError

جميع الأخطاء المذكورة أعلاه هي أنواع فرعية من 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

يوفر Ember AJAX مزيجًا يمكن استخدامه في Ember Data Converter لتجنب رمز الشبكة الذي توفره 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 بديلة (مثل الخدمة التي قمت بتوسيعها بنفسك)، يتم توفير خطافات للقيام بذلك؛ تحقق من تنفيذ 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 . إذا كنت تريد كائن 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 .

التوافق

• Node.js 6 أو أعلى
• Ember CLI v2.13 أو أعلى

تثبيت

• git clone هذا المستودع
• npm install

جري

• ember server
• قم بزيارة التطبيق الخاص بك على http://localhost:4200.

تشغيل الاختبارات

• ember test
• ember test --server

مبنى

• ember build

لمزيد من المعلومات حول استخدام Ember-cli، قم بزيارة http://www.ember-cli.com/.