কৌনিকটিতে একটি HTTP অনুরোধে url আর্গুমেন্টগুলি (ক্যোয়ারিং স্ট্রিং) কীভাবে পাস করবেন?


265

আমি কৌনিকটিতে একটি HTTP অনুরোধ তৈরি করছি, তবে এটিতে কীভাবে ইউআরএল আর্গুমেন্ট (ক্যোয়ারিং স্ট্রিং) যুক্ত করতে হয় তা আমি জানি না।

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

এখন আমার স্ট্যাটিকসেটেটিংস.বা.এস.ইউআরএল এমন একটি ইউআরএল যা কোনও প্রশ্নের স্ট্রিংবিহীন নয় : http://atsomeplace.com/ তবে আমি চাই এটি http://atsomeplace.com/?var1=val1&var2=val2 হোক

আমার এইচটিটিপি অনুরোধের অবজেক্টে কোথায় var1, এবং var2 ফিট? আমি তাদের একটি বস্তুর মতো যুক্ত করতে চাই।

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

এবং তারপরে এইচটিটিপি মডিউলটি ইউআরএল ক্যোয়ারী স্ট্রিংয়ে পার্স করার কাজটি করে।


stackoverflow.com/questions/26541801/… এটি উল্লেখ করুন। কল করার আগে ইউআরএল তৈরি করুন এবং এটি BASE_URL এর স্থানে ফাংশনটি সাবস্ক্রাইব করতে পাস করুন। 2cents
প্রতীকপওয়ার

উত্তর:


329

HttpClient পদ্ধতি সেট করতে আপনাকে অনুমতি দেয় প্যারাম এটা বিকল্পগুলিতে।

আপনি @ কৌণিক / সাধারণ / HTTP প্যাকেজ থেকে এইচটিটিপিপ্লায়েন্টমডিউল আমদানি করে এটি কনফিগার করতে পারেন ।

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

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

এর পরে আপনি এইচটিটিপিপ্লিনেন্ট ইনজেকশন করতে পারেন এবং অনুরোধটি করতে এটি ব্যবহার করতে পারেন।

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()
 );

এইচটিপি ক্লাসের ডকুমেন্টেশনে আরও বিশদ রয়েছে। এটি এখানে এবং একটি কার্যকারী উদাহরণ পাওয়া যাবে


2
একটি বক্তব্য : gist.github.com/MiguelLattuada/bb502d84854ad9fc26e0 ইউআরএল সার্চপ্যারামস অবজেক্টটি কীভাবে ব্যবহার করবেন, আবার ধন্যবাদ @ টসকভি
মিগুয়েল

1
ইউআরএল সার্চপ্যারামের সাথে দুর্দান্ত স্লিক! JSON অবজেক্টটি সিরিয়ালাইজ করে আমার সমস্যা সমাধান করুন।
লোগান এইচ

2
@ শুকুমারএস-এ এই পথের অংশ হওয়ার কারণে বিশেষ কোনও কিছুর প্রয়োজন নেই। কেবল 'ব্লেবলা / পেজ /' + পৃষ্ঠা + '/ অ্যাক্টিভ ফিল্টার' + অ্যাক্টিভ ফিল্টার স্ট্রিংগুলি সংহত করুন। অথবা আপনি যদি টেমপ্লেট লিটারালস ব্যবহার করতে চান তবে .com/ blabla.com/page / $ {পৃষ্ঠা} / $ {অ্যাক্টিভ ফিল্টার} ``
টস্কভ

10
এটি আমার জন্য কাজ করে:http.get(url, {params: {var1: val1, var2: val2}})
আলেকজান্ডার সুভেরভ

8
searchবৈশিষ্ট্যটি 4.0.0 -> paramsপরিবর্তে ব্যবহার থেকে বর্ণিত হয়েছে
বোটানমন

180

কৌণিক> = 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())
...

3
আমার জন্য কাজ করছে না। আমি উত্স কোডটি খনন করে দেখেছি যে http.get- র দ্বিতীয় প্যারামিটারটি একটি অনুরোধ অপশনআর্গস ইন্টারফেসের প্রত্যাশা করে, যা ইউআরএল সার্চপ্যারাম প্রয়োগ করে না। একটি অনুরোধঅ্যাপশন অবজেক্টের ভিতরে অনুসন্ধানের প্যারামগুলি মোড়ানো কাজ করে। শর্টকাট থাকলেও ভালো লাগবে।
হার্ডসেটিং

3
তুমি পুরোপুরি ঠিক, আমি ভুলে গেছি RequestOptions। আমি আমার উত্তর আপডেট।
রাদোয়ানে রাউফিড

1
এর থামিয়ে দেওয়া ইশারা জন্য ধন্যবাদ search। আমার প্রোব ঠিক করেছেন
ব্রেক্সটন

এই পরিবর্তনটি নির্দেশ করার জন্য আপনাকে ধন্যবাদ! আমি কয়েক ঘন্টা যাবত ডক্স এবং ইস্যু পেয়েছি সেগুলি আমাকে searchসম্পত্তিতে পরম সংযুক্ত করতে বলছে ।
রায়প্পস

63

সংস্করণ 5+

কৌণিক 5 এবং ততোধিকের সাথে আপনাকে HTTPParams ব্যবহার করতে হবে না । আপনি নীচে প্রদর্শিত হিসাবে সরাসরি আপনার json অবজেক্ট পাঠাতে পারেন।

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

দয়া করে নোট করুন যে ডেটা মানগুলি স্ট্রিং হওয়া উচিত, অর্থাত্; { params: {limit: "2"}}

সংস্করণ 4.3.x +

@ কৌণিক / সাধারণ / 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});

কিছু সাহায্য করতে পারে!


@ ব্রুনো পিয়ার্স ব্যবহার করে আপনার নেস্টেড অবজেক্টটি স্ট্রিংফাই করার চেষ্টা করুনJSON.stringify()
রহমাতুল্লাহ এম

1
@ রহমথুল্লাহ এম - বিচু, টিএইচএক্স :)
জামশেয়ার

12

কৌণিক 6

আপনি প্যারাম ব্যবহার করে কল পেতে প্রয়োজনীয় পরামিতিগুলিতে পাস করতে পারেন:

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

যেখানে x = {সম্পত্তি: "123"}}

"123" এনে থাকা এপিআই ফাংশনটির জন্য:

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

2
সংস্করণ ৫-এ এটি পরিবর্তন ছিল যা ইতিমধ্যে এখানে যুক্ত হয়েছে stackoverflow.com/a/45455904/3276721
মিগুয়েল লাতুয়াডা

9

আমার উদাহরণ

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

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

কোনও searchParams'বৈশিষ্ট্যের stringমান না হলে এটি কাজ করবে না ।
ইউলিয়ান

5

যদি আপনি একাধিক পরামিতি প্রেরণের পরিকল্পনা করেন।

উপাদান

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 অনুরোধটি অবিরত করুন ঠিক কীভাবে @ থেমসুলান করেছে।

সার্ভার পাশের রুট

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

আপনার পরিষেবাতে প্রাপ্ত অনুরোধে আমি কীভাবে আপনি অনুরোধটি পরিচালনা করছেন তা মিস করছি।
Winnemucca

ওহ আমি অনুমান করি যে আপনি এথুমাসুলানের জবাবের মতো একটি রিটার্ন হিসাবে এই পদ্ধতিতে HTTP অনুরোধটি রাখবেন
mjwrazor

2

আপনি @ কৌনিক / সাধারণ / HTTP থেকে এইচটিপিপ্যারামগুলি ব্যবহার করতে পারেন এবং ক্যোয়ারির সাথে একটি স্ট্রিং পাস করতে পারেন । উদাহরণ স্বরূপ:

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

এবং এটি আপনার জন্য কাজ করে :)

আমি আপনাকে সাহায্য করি


0
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


0
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);

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.