কৌণিক 4 এইচটিটিপি ক্লায়েন্ট ক্যোয়ারী প্যারামিটার

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()। সুতরাং, আমি যারা এখানে অনুরূপ তথ্য খুঁজছেন তাদের জন্য এটি এখানে পোস্ট করব।

যাইহোক, সিনট্যাক্সটি প্রায় অভিন্ন, তবে কিছুটা আলাদা। 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 })

শর্তাধীন লজিক সহ একাধিক পরামিতি

আমি প্রায়শই একাধিক প্যারামিটারগুলির সাথে যা করি তা হ'ল প্রতিটি কলটিতে উপস্থিতি প্রয়োজন না করে একাধিক পরামিতি ব্যবহারের অনুমতি দেওয়া। লোড্যাশ ব্যবহার করে, শর্তসাপেক্ষে এপিআইতে কলগুলি থেকে পরামিতিগুলি যুক্ত / সরানো খুব সহজ। লোডাশ বা অ্যান্ডস্কোরস, বা ভ্যানিলা জেএসে ব্যবহৃত সঠিক ফাংশনগুলি আপনার আবেদনের উপর নির্ভর করে পরিবর্তিত হতে পারে তবে আমি দেখেছি সম্পত্তি সংজ্ঞা জন্য পরীক্ষা করা বেশ ভাল কাজ করে। নীচের ফাংশনটি কেবলমাত্র প্যারামিটারগুলিতেই পাস করবে যা প্যারামিটারের মধ্যে ভ্যারিয়েবলের মধ্যে প্রাসঙ্গিক বৈশিষ্ট্যযুক্ত properties

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(...)প্রত্যাশার মতো কাজ করবে না স্ট্যাকওভারফ্লো

— প্রশ্নগুলি /

@ জোশরাথকে আপনি কীভাবে একসাথে শিরোনাম এবং প্যারাম যুক্ত করতে পারেন?

— সাভাদ কেপি

@ সাভাদকেপি আপনি এগুলিকে এই জাতীয় সেট করতে পারেন tt এবং HTTPParams

— জুনাইদ

আমার অনুমানটি new HttpParams({fromObject: { param1: 'value1', ... }});তখন সবচেয়ে সহজ পদ্ধতির (কৌণিক 5+) params.set(...)।

— পঙ্কজ প্রকাশ

Answer 2

আপনি কিছু সহজ করার জন্য HTTPParamaters তৈরি করার সময় from ( অবজেক্ট 5+ এ) অবজেক্ট এবং স্ট্রিং কনস্ট্রাক্টর প্যারামিটারগুলি ব্যবহার করতে পারেন

    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

এটি আর প্রয়োজন হয় না। আপনি সরাসরি এইচটিপিপ্লিয়েন্টে কোনও জেএসএন বস্তুটি পাস করতে পারেন। const params = {'key': 'value'}প্রতি: http.get('/get/url', { params: params })

— বিপদ 89

পছন্দ করুন তবে সতর্ক হতে হবে: কেবল স্ট্রিং বা স্ট্রিং [] মান অনুমোদিত!

— হোসে এনরিক

আমার সময় প্রচুর পরিমাণে সংরক্ষণ করা। আমি অনুরোধ ইউআরএলটিতে স্ট্রিং হিসাবে ক্যোয়ারী প্যারাম যুক্ত করে url নির্মাণ করছিলাম।

— পঙ্কজ প্রকাশ

Answer 3

আপনি এটি পাস করতে পারেন

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

Comments

সত্য তবে এটি উইন্ডোটি টাইপ করে ফেলেছে

— ড্যানল্যাটিমার

@ ড্যানল্যাটিমার আপনাকে কোনও ব্যবহার করতে হবে না, তাই আপনি এটি পাস না করা পর্যন্ত আপনি সমস্ত উপায়ে টাইপিং চালিয়ে যেতে পারেনparams

— ইনডিয়েস্টেন

Answer 4

আরও সংক্ষিপ্ত সমাধান:

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

Answer 5

কৌনিক 7 এর সাথে, আমি এইচটিটিপিরামগুলি ব্যবহার না করে নিম্নলিখিতটি ব্যবহার করে এটি কাজ করেছিলাম।

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

জোশরাথকে ঠিক বলেছি।

Angular.io সালে ডক্স লেখা আছে যে থেকে @ কৌণিক / HTTP URLSearchParams অবচিত । পরিবর্তে আপনার @ কৌনিক / সাধারণ / HTTP থেকে এইচটিপিপ্যারামগুলি ব্যবহার করা উচিত । কোডটি বেশ সমকালীন এবং জোশরথকে যা লিখেছেন তার সাথে সমান। একাধিক পরামিতিগুলির জন্য যা কোনও বস্তুর মতো উদাহরণ হিসাবে সংরক্ষণ করা হয়

{
  firstParam: value1,
  secondParam, value2
}

আপনি করতে পারেন

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

আপনার যদি উত্তরাধিকারসূত্রে প্রাপ্ত বৈশিষ্ট্যের প্রয়োজন হয় তবে সেই অনুসারে হ্যাশঅনপ্রপার্টিটি সরিয়ে দিন।

Answer 8

অনুসন্ধান ধরনের সম্পত্তি URLSearchParams মধ্যে RequestOptions বর্গ পরিবর্তে, আপনি ব্যবহার করা উচিত কৌণিক 4. মধ্যে অবচিত প্যারাম ধরনের সম্পত্তি URLSearchParams ।