कोणीय 4 HttpClient क्वेरी पैरामीटर

Question

मैं एक तरह से नए के साथ एक API कॉल में क्वेरी पैरामीटर पारित करने के लिए की तलाश में था HttpClientModuleकी HttpClientहै और एक समाधान खोजने के लिए अभी तक है। पुराने 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 के लिए API कॉल का परिणाम देगा:

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

हालाँकि, नई HttpClient get()पद्धति में कोई searchसंपत्ति नहीं है , इसलिए मैं सोच रहा हूं कि क्वेरी पैरामीटर में कहां से पारित किया जाए?

Comments

कोणीय 7 के साथ, आप अपने परिमों को एक वस्तु के रूप में लिख सकते हैं और इसे इस तरह से उपयोग कर सकते हैं: this.httpClient.get(url, { params } बाहर की जाँच करें stackoverflow.com/a/54211610/5042169

— Jun711

Answer 1

मैंने इसे get()फंक्शन पर IntelliSense के माध्यम से ढूंढना समाप्त किया । तो, मैं इसे यहाँ पोस्ट करूँगा जो भी इसी तरह की जानकारी की तलाश में है।

वैसे भी, वाक्यविन्यास लगभग समान है, लेकिन थोड़ा अलग है। के बजाय 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 में कॉल से सशर्त रूप से पैरामीटर जोड़ना / निकालना बहुत सरल है। लोदश या अंडरस्कोर, या वेनिला जेएस में उपयोग किए जाने वाले सटीक कार्य आपके आवेदन के आधार पर भिन्न हो सकते हैं, लेकिन मैंने पाया है कि संपत्ति की परिभाषा के लिए जाँच बहुत अच्छी तरह से काम करती है। नीचे दिया गया फ़ंक्शन केवल उन मापदंडों को पारित करेगा जिनके पास फ़ंक्शन में पारित पैरामीटर चर के भीतर समान गुण हैं।

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 })

Comments

पहला स्निपेट गलत है। let params = new HttpParams(); params.set(...)उम्मीद के मुताबिक काम नहीं होगा। देखें stackoverflow.com/questions/45459532/…

— एस्टस फ्लास्क

@joshrathke क्या आप कृपया हेडर और परम को एक साथ कैसे जोड़ सकते हैं?

— सवद केपी

@SavadKP आप उन्हें इस तरह सेट कर सकते हैं ।http.get (url, {हेडर: हेडर, परमेस: परम्स}); और HttpParams जैसे नए HttpHeaders के बारे में पढ़ें

— जुनैद

मुझे लगता new HttpParams({fromObject: { param1: 'value1', ... }});है कि सबसे आसान तरीका (कोणीय 5+) है params.set(...)।

— पंकज प्रकाश

Answer 2

HttpParamaters को थोड़ा आसान बनाने के लिए आप (संस्करण 5+ में) fromObject और fromString कंस्ट्रक्टर मापदंडों का उपयोग कर सकते हैं

    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

Comments

इसकी अब जरूरत नहीं है। आप बस सीधे JSON ऑब्जेक्ट को HttpClient पास कर सकते हैं। const params = {'key': 'value'}से:http.get('/get/url', { params: params })

— खतरे

@ डॉंग 89 सच। लेकिन चेतावनी दी जाए: केवल स्ट्रिंग या स्ट्रिंग [] मूल्यों की अनुमति है!

— जोस एनरिक

मेरे समय की भारी मात्रा में बचत की। मैं अनुरोध URL के लिए स्ट्रिंग के रूप में क्वेरी params जोड़कर url का निर्माण कर रहा था।

— पंकज प्रकाश

Answer 3

आप इसे इस तरह से पास कर सकते हैं

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

Comments

यह सच है लेकिन वह खिड़की से बाहर फेंकता है

— DanLatimer

@DanLatimer आपको कोई उपयोग करने की आवश्यकता नहीं है, इसलिए जब तक आप इसे पास नहीं कर params

— लेते

Answer 4

अधिक संक्षिप्त समाधान:

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

Answer 5

कोणीय 7 के साथ, मुझे HttpParams का उपयोग किए बिना निम्नलिखित का उपयोग करके यह काम मिला।

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

export class ApiClass {

  constructor(private httpClient: HttpClient) {
    // use it like this in other services / components etc.
    this.getDataFromServer().
      then(res => {
        console.log('res: ', res);
      });
  }

  getDataFromServer() {
    const params = {
      param1: value1,
      param2: value2
    }
    const url = 'https://api.example.com/list'

    // { params: params } is the same as { params } 
    // look for es6 object literal to read more
    return this.httpClient.get(url, { params }).toPromise();
  }
}

Answer 6

यदि आपके पास एक ऐसी वस्तु है जिसे {key: 'stringValue'}जोड़े में बदला जा सकता है , तो आप इस शॉर्टकट का उपयोग इसे बदलने के लिए कर सकते हैं:

this._Http.get(myUrlString, {params: {...myParamsObject}});

मैं सिर्फ फैल सिंटैक्स प्यार करता हूँ!

Answer 7

Joshrathke सही है।

Angular.io डॉक्स में लिखा गया है कि @ angular / http से URLSearchParams को हटा दिया गया है । इसके बजाय आपको @ कोणीय / सामान्य / http से HttpParams का उपयोग करना चाहिए । जोशरेथके ने जो लिखा है वह कोड काफी अनुकरणीय और समान है। कई मापदंडों के लिए जो किसी ऑब्जेक्ट में उदाहरण के लिए सहेजे जाते हैं जैसे

{
  firstParam: value1,
  secondParam, value2
}

आप भी कर सकते हैं

for(let property in objectStoresParams) {
  if(objectStoresParams.hasOwnProperty(property) {
    params = params.append(property, objectStoresParams[property]);
  }
}

यदि आपको विरासत में दिए गए गुणों की आवश्यकता है, तो उसके अनुसार hasOwnProperty को हटा दें।

Answer 8

खोज प्रकार की संपत्ति URLSearchParams में RequestOptions वर्ग इसके बजाय, आप का उपयोग करना चाहिए कोणीय 4 में अब मान्य नहीं है पैरामीटर प्रकार की संपत्ति URLSearchParams ।