تايب سكريبت - معلمات استعلام HttpClient في Angular 4

لقد كنت أبحث عن طريقة لتمرير معلمات الاستعلام في استدعاء واجهة برمجة التطبيقات باستخدام HttpClient الخاص بـ HttpClientModule الجديد ولم أجد حلاً بعد. مع وحدة Http القديمة كنت تكتب شيئًا مثل هذا.

getNamespaceLogs(logNamespace) {

    // Setup log namespace query parameter
    let params = new URLSearchParams();
    params.set('logNamespace', logNamespace);

    this._Http.get(`${API_URL}/api/v1/data/logs`, { search: params })
}

سيؤدي هذا إلى استدعاء واجهة برمجة التطبيقات إلى عنوان URL التالي:

localhost:3001/api/v1/data/logs?logNamespace=somelogsnamespace

ومع ذلك، فإن طريقة get() الجديدة في HttpClient لا تحتوي على خاصية search، لذلك أتساءل أين يمكن تمرير معلمات الاستعلام؟

الإجابة رقم 1

انتهى بي الأمر إلى العثور عليه من خلال IntelliSense في الدالة get(). لذلك، سأقوم بنشره هنا لأي شخص يبحث عن معلومات مشابهة.

على أي حال، الصياغة تقريبًا متطابقة، لكنها مختلفة قليلاً. بدلاً من استخدام URLSearchParams() يجب تهيئة المعايير كـ HttpParams() والخاصية داخل دالة get() تُسمى الآن params بدلاً من search.

import { HttpClient, HttpParams } from '@angular/common/http';

getLogs(logNamespace): Observable<any> {

    // Setup log namespace query parameter
    let params = new HttpParams().set('logNamespace', logNamespace);

    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params })
}

في الواقع أفضل هذا التركيب لأنه أكثر حيادية تجاه المعاملات. لقد قمت أيضًا بإعادة هيكلة الكود لجعله موجزًا قليلاً.

getLogs(logNamespace): Observable<any> {

    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, {
        params: new HttpParams().set('logNamespace', logNamespace)
    })
}

معلمات متعددة

أفضل طريقة وجدتها حتى الآن هي تعريف كائن Params يحتوي على جميع المعلمات التي أريد تعريفها داخله. كما أشار @estus في التعليق أدناه، هناك الكثير من الإجابات الرائعة في هذا السؤال حول كيفية تعيين عدة معلمات.

getLogs(parameters) {

    // Initialize Params Object
    let params = new HttpParams();

    // Begin assigning parameters
    params = params.append('firstParameter', parameters.valueOne);
    params = params.append('secondParameter', parameters.valueTwo);

    // Make the API call using the new parameters.
    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params })

معلمات متعددة مع منطق شرطي

شيء آخر غالبًا ما أفعله مع عدة معلمات هو السماح باستخدام عدة معلمات دون الحاجة لوجودها في كل استدعاء. باستخدام Lodash، من البسيط جدًا إضافة أو إزالة المعلمات من الاستدعاءات إلى API بشكل مشروط. قد تختلف الدوال المستخدمة بالضبط في Lodash أو Underscore، أو JavaScript العادي حسب تطبيقك، لكنني وجدت أن التحقق من تعريف الخاصية يعمل بشكل جيد. الدالة أدناه ستمر فقط بالمعلمات التي لها خصائص مقابلة داخل متغير المعلمات الممرر إلى الدالة.

getLogs(parameters) {

    // Initialize Params Object
    let params = new HttpParams();

    // Begin assigning parameters
    if (!_.isUndefined(parameters)) {
        params = _.isUndefined(parameters.valueOne) ? params : params.append('firstParameter', parameters.valueOne);
        params = _.isUndefined(parameters.valueTwo) ? params : params.append('secondParameter', parameters.valueTwo);
    }

    // Make the API call using the new parameters.
    return this._HttpClient.get(`${API_URL}/api/v1/data/logs`, { params: params })

الإجابة رقم 2

يمكنك (في الإصدار 5+) استخدام معاملات الباني fromObject و fromString عند إنشاء HttpParamaters لتسهيل الأمور قليلاً

    const params = new HttpParams({
      fromObject: {
        param1: 'value1',
        param2: 'value2',
      }
    });

    // http://localhost:3000/test?param1=value1&param2=value2

أو :

    const params = new HttpParams({
      fromString: `param1=${var1}&param2=${var2}`
    });

    //http://localhost:3000/test?paramvalue1=1&param2=value2

الإجابة رقم 3

يمكنك تمريره هكذا

let param: any = {'userId': 2};
this.http.get(`${ApiUrl}`, {params: param})

الإجابة رقم 4

حل أكثر إيجازًا:

this._Http.get(`${API_URL}/api/v1/data/logs`, { 
    params: {
      logNamespace: logNamespace
    } 
 })