Angular पर HTTP अनुरोध के लिए url तर्कों (क्वेरी स्ट्रिंग) को कैसे पास करें?

Question

मैं Angular पर एक HTTP अनुरोध बना रहा हूं, लेकिन मुझे नहीं पता कि इसमें url आर्ग्युमेंट्स (क्वेरी स्ट्रिंग) को कैसे जोड़ा जाए।

this.http.get(StaticSettings.BASE_URL).subscribe(
  (response) => this.onGetForecastResult(response.json()),
  (error) => this.onGetForecastError(error.json()),
  () => this.onGetForecastComplete()
);

अब मेरा StaticSettings.BASE_URL एक यूआरएल की तरह है जिसमें कोई क्वेरी स्ट्रिंग नहीं है जैसे: http://atsomeplace.com/ लेकिन मैं चाहता हूं कि यह http://atsomeplace.com/?var1=val1&var2=val2 हो

जहाँ var1, और var2 मेरे Http रिक्वेस्ट ऑब्जेक्ट पर फिट होते हैं? मैं उन्हें एक वस्तु की तरह जोड़ना चाहता हूं।

{
  query: {
    var1: val1,
    var2: val2
  }
}

और फिर बस Http मॉड्यूल इसे URL क्वेरी स्ट्रिंग में पार्स करने का काम करता है।

Comments

stackoverflow.com/questions/26541801/… इसे देखें। कॉल से पहले URL बनाएं और BASE_URL के स्थान पर सदस्यता लेने के लिए इसे पास करें। 2cents

— pratikpawar

Answer 1

HttpClient तरीकों आप निर्धारित करने की अनुमति पैरामीटर यह के विकल्प में।

आप इसे @ कोणीय / सामान्य / http पैकेज से HttpClientModule आयात करके कॉन्फ़िगर कर सकते हैं ।

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

@NgModule({
  imports: [ BrowserModule, HttpClientModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

उसके बाद आप HttpClient को इंजेक्ट कर सकते हैं और अनुरोध करने के लिए इसका उपयोग कर सकते हैं।

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

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
    </div>
  `,
})
export class App {
  name:string;
  constructor(private httpClient: HttpClient) {
    this.httpClient.get('/url', {
      params: {
        appid: 'id1234',
        cnt: '5'
      },
      observe: 'response'
    })
    .toPromise()
    .then(response => {
      console.log(response);
    })
    .catch(console.log);
  }
}

संस्करण 4 से पहले कोणीय संस्करणों के लिए आप एचटीपी सेवा का उपयोग करके भी ऐसा कर सकते हैं ।

Http.get विधि एक वस्तु लेता है कि लागू RequestOptionsArgs एक दूसरे पैरामीटर के रूप में।

खोज है कि वस्तु के क्षेत्र एक स्ट्रिंग या एक स्थापित करने के लिए इस्तेमाल किया जा सकता URLSearchParams वस्तु।

एक उदाहरण:

 // Parameters obj-
 let params: URLSearchParams = new URLSearchParams();
 params.set('appid', StaticSettings.API_KEY);
 params.set('cnt', days.toString());

 //Http request-
 return this.http.get(StaticSettings.BASE_URL, {
   search: params
 }).subscribe(
   (response) => this.onGetForecastResult(response.json()), 
   (error) => this.onGetForecastError(error.json()), 
   () => this.onGetForecastComplete()
 );

Http वर्ग के लिए प्रलेखन में अधिक विवरण हैं। यह यहां और एक कार्यशील उदाहरण यहां पाया जा सकता है ।

Comments

A gist: gist.github.com/MiguelLattuada/bb502d84854ad9fc26e0 URLSearchParams ऑब्जेक्ट का उपयोग कैसे करें, धन्यवाद फिर से @toskv

— मिगुएल लट्ठवाड़ा

URLSearchParams के साथ सुपर चालाक! JSON ऑब्जेक्ट को क्रमांकित करने के साथ मेरे मुद्दे को हल किया।

— लोगन एच।

@SukumarMS पथ के भाग के बाद से वास्तव में किसी विशेष चीज की कोई आवश्यकता नहीं है। बस स्ट्रिंग्स को 'blabla.com/page/' + पेज + '/ activeFilter' + एक्टिवफिल्टर से मिलाएं। या यदि आप टेम्पलेट शाब्दिक उपयोग करना चाहते हैं `blabla.com/page / $ {पृष्ठ} / $ {activeFilter}`।

— टॉस्क

यह मेरे लिए काम करता है:http.get(url, {params: {var1: val1, var2: val2}})

— अलेक्जेंडर Suvorov

searchप्रॉपर्टी को 4.0.0 -> उपयोग के paramsबजाय

— खाली

Answer 2

कोणीय> = 4.3.x संपादित करें

HttpClient को HttpParams के साथ पेश किया गया है । उपयोग के एक उदाहरण के नीचे:

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

constructor(private http: HttpClient) { }

let params = new HttpParams();
params = params.append('var1', val1);
params = params.append('var2', val2);

this.http.get(StaticSettings.BASE_URL, {params: params}).subscribe(...);

---

(पुराने उत्तर)

कोणीय> = 4.x संपादित करें

requestOptions.searchपदावनत कर दिया गया है। requestOptions.paramsइसके बजाय उपयोग करें :

let requestOptions = new RequestOptions();
requestOptions.params = params;

---

मूल उत्तर (कोणीय 2)

आपको URLSearchParamsनीचे के रूप में आयात करने की आवश्यकता है

import { Http, RequestOptions, URLSearchParams } from '@angular/http';

और फिर अपने मापदंडों का निर्माण और निम्नलिखित के रूप में http अनुरोध करें:

let params: URLSearchParams = new URLSearchParams();
params.set('var1', val1);
params.set('var2', val2);

let requestOptions = new RequestOptions();
requestOptions.search = params;

this.http.get(StaticSettings.BASE_URL, requestOptions)
    .toPromise()
    .then(response => response.json())
...

Comments

मेरे लिए काम नहीं कर रहा है। मैंने स्रोत कोड में खुदाई की और पाया कि http.get का दूसरा पैरामीटर एक RequestOptionsArgs इंटरफ़ेस की अपेक्षा करता है, जिसे URLSearchParams लागू नहीं करता है। एक RequestOptions ऑब्जेक्ट के अंदर searchParams लपेटकर काम करता है। हालांकि एक शॉर्टकट रखना अच्छा होगा।

— कष्टप्रद

तुम बिलकुल ठीक हो, मैं भूल गया RequestOptions। मैंने अपना उत्तर अपडेट कर दिया।

— राडौने रूफिड

के अपव्यय को इंगित करने के लिए धन्यवाद search। फिक्स्ड

— हेडन ब्रेक्सटन

इस बदलाव को इंगित करने के लिए धन्यवाद! सभी डॉक्स और मुद्दों को मैंने घंटों तक पाया है जो मुझे searchसंपत्ति के लिए पैरामेट्स संलग्न करने के लिए कह रहे हैं।

— किरण

Answer 3

संस्करण 5+

कोणीय 5 और ऊपर के साथ, आपको HttpParams का उपयोग नहीं करना होगा । आप नीचे दिखाए गए अनुसार सीधे अपने json ऑब्जेक्ट भेज सकते हैं।

let data = {limit: "2"};
this.httpClient.get<any>(apiUrl, {params: data});

कृपया ध्यान दें कि डेटा मान स्ट्रिंग होना चाहिए, अर्थात; { params: {limit: "2"}}

संस्करण 4.3.x +

का प्रयोग करें HttpParams, HttpClient से @ कोणीय / आम / http

import { HttpParams, HttpClient } from '@angular/common/http';
...
constructor(private httpClient: HttpClient) { ... }
...
let params = new HttpParams();
params = params.append("page", 1);
....
this.httpClient.get<any>(apiUrl, {params: params});

कुछ मदद कर सकते हैं!

Comments

@BrunoPeres अपनी नेस्टेड ऑब्जेक्ट का उपयोग करके उन्हें संशोधित करने का प्रयास करेंJSON.stringify()

— रहमथुल्लाह एम

@ राममहुल्लाह - बिचू, टीएचएक्स :)

— जमशीर

Answer 4

कोणीय ६

आप पैरामीटर का उपयोग करके कॉल प्राप्त करने के लिए आवश्यक मापदंडों को पारित कर सकते हैं:

this.httpClient.get<any>(url, { params: x });

जहाँ x = {संपत्ति: "123"}।

"123" लॉग करने वाले एपीआई फ़ंक्शन के लिए:

router.get('/example', (req, res) => {
    console.log(req.query.property);
})

Comments

यह संस्करण 5 में जोड़ा गया एक परिवर्तन था। पहले से ही यहां जोड़ा गया stackoverflow.com/a/45455904/3276721

— मिगुएल लुटुआडा

Answer 5

मेरा उदाहरण है

private options = new RequestOptions({headers: new Headers({'Content-Type': 'application/json'})});

मेरी विधि

  getUserByName(name: string): Observable<MyObject[]> {
    //set request params
    let params: URLSearchParams = new URLSearchParams();
    params.set("name", name);
    //params.set("surname", surname); for more params
    this.options.search = params;

    let url = "http://localhost:8080/test/user/";
    console.log("url: ", url);

    return this.http.get(url, this.options)
      .map((resp: Response) => resp.json() as MyObject[])
      .catch(this.handleError);
  }

  private handleError(err) {
    console.log(err);
    return Observable.throw(err || 'Server error');
  }

मेरे घटक में

  userList: User[] = [];
  this.userService.getUserByName(this.userName).subscribe(users => {
      this.userList = users;
    });

डाकिया द्वारा

http://localhost:8080/test/user/?name=Ethem

Answer 6

नवीनतम कोणीय 7/8 में, आप सबसे सरल दृष्टिकोण का उपयोग कर सकते हैं: -

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

getDetails(searchParams) {
    const httpOptions = {
        headers: { 'Content-Type': 'application/json' },
        params: { ...searchParams}
    };
    return this.http.get(this.Url, httpOptions);
}

Comments

यह काम नहीं करेगा यदि कोई भी searchParamsगुण stringमान नहीं है।

— यूलियन

Answer 7

यदि आप एक से अधिक पैरामीटर भेजने की योजना बनाते हैं।

अंग

private options = {
  sort:   '-id',
  select: null,
  limit:  1000,
  skip:   0,
  from:   null,
  to:     null
};

constructor(private service: Service) { }

ngOnInit() {
  this.service.getAllItems(this.options)
    .subscribe((item: Item[]) => {
      this.item = item;
    });
}

सर्विस

private options = new RequestOptions({headers: new Headers({'Content-Type': 'application/json'})});
constructor(private http: Http) { }

getAllItems(query: any) {
  let params: URLSearchParams = new URLSearchParams();
  for(let key in query){
    params.set(key.toString(), query[key]);
  }
  this.options.search = params;
  this.header = this.headers();

और अपने http अनुरोध के साथ जारी रखें कि कैसे @ethemsulan ने किया।

सर्वर साइड मार्ग

router.get('/api/items', (req, res) => {
  let q = {};
  let skip = req.query.skip;
  let limit = req.query.limit;
  let sort  = req.query.sort;
  q.from = req.query.from;
  q.to = req.query.to;

  Items.find(q)
    .skip(skip)
    .limit(limit)
    .sort(sort)
    .exec((err, items) => {
      if(err) {
        return res.status(500).json({
          title: "An error occurred",
          error: err
        });
      }
      res.status(200).json({
        message: "Success",
        obj:  items
      });
    });
});

Comments

आपकी सेवा के लिए अनुरोध में मुझे याद आ रहा है कि आप कैसे अनुरोध प्राप्त कर रहे हैं।

— विनीमुक्का

ओह, मुझे लगता है कि आप उस तरीके से अनुरोध प्राप्त करेंगे जैसे कि एथमसुल्न के उत्तर की तरह वापसी

— mjwrazor

Answer 8

आप @ कोणीय / सामान्य / http से HttpParams का उपयोग कर सकते हैं और क्वेरी के साथ एक स्ट्रिंग पास कर सकते हैं । उदाहरण के लिए:

import { HttpClient, HttpParams } from '@angular/common/http';
const query = 'key=value' // date=2020-03-06

const options = {
  params: new HttpParams({
    fromString: query
  })
}

अब आपके कोड में

this.http.get(urlFull, options);

और यह आपके लिए काम करता है :)

मैं आपकी मदद करता हूं

Answer 9

import ...
declare var $:any;
...
getSomeEndPoint(params:any): Observable<any[]> {
    var qStr = $.param(params); //<---YOUR GUY
    return this._http.get(this._adUrl+"?"+qStr)
      .map((response: Response) => <any[]> response.json())
      .catch(this.handleError);
}

बशर्ते कि आप है jQuery स्थापित , मैं करता हूँ npm i jquery --saveऔर में शामिल apps.scriptsमेंangular-cli.json

Answer 10

import { Http, Response } from '@angular/http';
constructor(private _http: Http, private router: Router) {
}

return this._http.get('http://url/login/' + email + '/' + password)
       .map((res: Response) => {
           return res.json();
        }).catch(this._handleError);

Answer 11

आप आधिकारिक दस्तावेज से यूआरएल पैरामीटर का उपयोग कर सकते हैं ।

उदाहरण: this.httpClient.get(this.API, { params: new HttpParams().set('noCover', noCover) })