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




http typescript (6)

আমি নতুন 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- এ একটি API কল আসবে:

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

যাইহোক, নতুন HttpClient get() পদ্ধতিতে search সম্পত্তি নেই, তাই আমি ভাবছি কোয়েরি প্যারামিটারগুলিতে কোথায় পাস করব?


কৌণিক 7 এ URL সহ একাধিক প্যারামিটার উত্তরণ

  component.ts File --
  --------------------------------------------------------------------------
  export class UnsubscribeComponent implements OnInit {
  email: string;
  token: string;

  constructor(private httpSvc: HttpService) {}


  ngOnInit() {
  this.httpSvc.get('pin/unsubscribe'+'? 
  email='+this.email+'&tn='+this.token).subscribe(res => {
  if (res.status === this.appConstants.ResponseCodes.success) {      
          //Do what you want
    } else {
      //Do what you want
     }
   });
 }

আপনার যদি এমন কোনও বস্তু থাকে যা {key: 'stringValue'} রূপান্তর করা যায়, আপনি এই রূপান্তর করতে এই শর্টকাটটি ব্যবহার করতে পারেন:

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

আমি কেবল স্প্রেড সিনট্যাক্সকে ভালবাসি!


আপনি কিছু সহজ করার জন্য 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

আমি গেট get() ফাংশনে ইন্টেলিজেন্সের মাধ্যমে এটি সন্ধান করে শেষ করেছি। সুতরাং, আমি যারা এখানে অনুরূপ তথ্য খুঁজছেন তাদের জন্য এটি এখানে পোস্ট করব।

যাইহোক, সিনট্যাক্সটি প্রায় অভিন্ন, তবে কিছুটা আলাদা। URLSearchParams() ব্যবহার করার পরিবর্তে প্যারামিটারগুলিকে HttpParams() হিসাবে আরম্ভ করা দরকার এবং HttpParams() get() ফাংশনের মধ্যে থাকা সম্পত্তিটিকে এখন search পরিবর্তে HttpParams() বলা হয়।

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

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

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

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

কৌণিক 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();
  }
}

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

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

{
  firstParam: value1,
  secondParam, value2
}

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

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

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





lodash