angular कोणीय 2 http अनुरोधों के लिए बेस यूआरएल सेट करें




angular2-http (8)

मैं अपने सभी कोणीय 2 http अनुरोधों के लिए बेस यूआरएल सेट करने की कोशिश कर रहा हूं। मेरे आवेदन के लिए बुनियादी सेट अप निम्नलिखित है।

class HttpOptions extends BaseRequestOptions {
  url:string = "http://10.7.18.21:8080/api/";
}


bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  provide(RequestOptions, {useClass: HttpOptions})
]);


export class AppComponent {
  users:Array<User>
  constructor(private http: Http) {
    http.get("/users")
      .subscribe(res => this.users = res.json());
  }
}

अनुरोध को मेरी कॉन्फ़िगरेशन से अपेक्षित http://10.7.18.21:8080/api/users नहीं भेजा गया है। इसके बजाय अनुरोध http://localhost:8000/users को भेजा गया है।

मैं कोणीय 2 अनुप्रयोग में http अनुरोध के लिए बेस यूआरएल कैसे सेट करूं?

मैं कोणीय 2.0.0-बीटा 2.0 का उपयोग कर रहा हूँ।


अलग दृष्टिकोण: स्थानीय ऐप में अपने ऐप को चलाने के विकास के दौरान, प्रॉक्सी को कॉन्फ़िगर करने पर विचार करें।

proxy.conf.json

{
   "/api/**": {
      "target": "http://10.7.18.21:8080/",
      "secure": false,
      "logLevel": "debug"
   }
}

अधिक: link


कोणीय 2.0.0-बीटा 6 में आप इसे 'विलय' ओवरराइड करके प्राप्त कर सकते हैं

import {BaseRequestOptions, RequestOptions, RequestOptionsArgs} from 'angular2/http';

export class ApRequestOptions extends BaseRequestOptions {

  merge(options?:RequestOptionsArgs):RequestOptions {
    options.url = 'http://10.7.18.21:8080/api' + options.url;
    return super.merge(options);
  }

}

वर्तमान में उपयोगकर्ता के लिए, कोणीय 2.4.8 में वास्तव में काम कर रहा उदाहरण है

बेसकॉमर रिवेस्टऑप्शन और कॉमनआरवेस्टऑप्शन के विभाजन और जंजीर के लिए कोड here है।

import { BaseRequestOptions, Headers, RequestOptions, RequestOptionsArgs } from '@angular/http';
import { Injectable } from '@angular/core';

@Injectable()
export class BaseCommonRequestOptions extends BaseRequestOptions {

  merge(options?: RequestOptionsArgs): RequestOptions {
    return new CommonRequestOptions(super.merge(extracted(options)));
  }
}

/**
 * for inner merge when using post put patch delete...others method
 */
export class CommonRequestOptions extends RequestOptions {
  merge(options?: RequestOptionsArgs): RequestOptions {
    return new RequestOptions(super.merge(extracted(options)));
  }
}

/**
 * inject default values
 *
 * @param options
 * @returns {RequestOptionsArgs}
 */
export function extracted(options: RequestOptionsArgs) {
  console.log(options);
  if (!validUrl(options.url)) {
    options.url = 'http://localhost:3000' + (options.url ? options.url : "");
  }
  // use default header application/json, if content-type header was empty.
  if (options.headers != null) {
    let contentType = options.headers.get('content-type');
    if (contentType == null || contentType == '') {
      options.headers.append('content-type', 'application/json');
    }
  } else {
    options.headers = new Headers({ 'content-type': 'application/json' });
  }

  return options;
}

/**
 * validate url
 *
 * @param url
 * @returns {boolean}
 */
export function validUrl(url: string) {
  return /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/.test(url);
}


Angular2 संस्करण 2.2 के लिए (दिसंबर 2016 तक)

आरसी 5 मार्क HTTP_PROVIDERS से कोणीय को @NgModule गया है और चीजों को @NgModule में स्थानांतरित करने का प्रयास कर रहा है, उपर्युक्त समाधान वास्तव में लागू नहीं है, इसलिए उनके दस्तावेज़। मैंने कई अन्य उत्तरों को पार किया और बेस यूआरएल को लागू करने के लिए अपना रास्ता खोज लिया, उम्मीद है कि यह किसी और के लिए सहायक हो सकता है।

बुनियादी विचार है, बूटस्ट्रैप में चीजों को करने के बजाय, हम चीजों को AppModule ले जाते हैं।

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, RequestOptions } from '@angular/http';


import { CustomRequestOptions } from './customrequest.options';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    HttpModule,
    ...
  ],
  providers: [
    { provide: RequestOptions, useClass: CustomRequestOptions }
  ],
  bootstrap: [ AppComponent ]
})

और CustomRequestOptions को एक अलग इंजेक्शन योग्य सेवा में ले जाएं

import { Injectable } from '@angular/core';
import { BaseRequestOptions, RequestOptions, RequestOptionsArgs } from '@angular/http';

@Injectable()
export class CustomRequestOptions extends BaseRequestOptions {
  merge(options?:RequestOptionsArgs):RequestOptions {
    options.url = 'http://localhost:9080' + options.url;
    return super.merge(options);
  }
}

जीईटी के अलावा अनुरोध विधि के लिए संपादित करें।

यदि आप जीईटी के अलावा अनुरोध प्रकार भेजने की कोशिश कर रहे हैं, तो पिछली विधि बेसल को अनुरोध में इंजेक्ट करने में विफल रही है। ऐसा इसलिए है क्योंकि Angular2 इस के अलावा नए RequestOptions उत्पन्न करता है this._defaultOptions जिनकी विलय विधि हमारे CustomRequestOptions द्वारा ओवरराइड नहीं की जा रही है। (यहां स्रोत कोड देखें)।

तो CustomRequestOptions विलय विधि के अंतिम चरण में super.merge(...) को लौटने की बजाय, मैंने यह सुनिश्चित करने के लिए CustomRequestOptions का एक नया उदाहरण तैयार किया है कि निम्न ऑपरेशन अभी भी काम करेगा।

import { Injectable } from '@angular/core';
import { RequestOptions, RequestOptionsArgs } from '@angular/http';

@Injectable()
export class CustomRequestOptions extends RequestOptions {
  merge(options?: RequestOptionsArgs): RequestOptions {
    if (options !== null && options.url !== null) {
      options.url = 'http://localhost:9080' + options.url;
    }
    let requestOptions = super.merge(options)
    return new CustomRequestOptions({
      method: requestOptions.method,
      url: requestOptions.url,
      search: requestOptions.search,
      headers: requestOptions.headers,
      body: requestOptions.body,
      withCredentials: requestOptions.withCredentials,
      responseType: requestOptions.responseType
    });
  }
}

और यह पोस्ट, पुट, डिलीट विधि के लिए भी काम करता है। उम्मीद है कि यह सहायक है।



BaseRequestOptions , RequestOptions और Http कक्षाओं के लिए कोड स्रोतों को देखने के बाद:

ऐसा प्रतीत होता है कि url प्रॉपर्टी डिफ़ॉल्ट यूआरएल से मेल खाती है लेकिन यूआरएल के लिए उपसर्ग नहीं है।

अपने उपयोग के मामले को लागू करने के लिए, मैं सुझाव देता हूं कि http ऑब्जेक्ट के सामने एक सेवा डालें और फिर सेवा को इंजेक्ट करें। ऐसा कुछ:

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';

@Injectable()
export class HttpClient {
  http: Http;
  urlPrefix: string;

  constructor(http: Http) {
    this.http = http;
    this.urlPrefix = 'http://...';
  }

  get(url) {
    return this.http.get(this.urlPrefix + url);
  }

  post(url, data) {
    return this.http.post(this.urlPrefix + url, data);
  }
}

तथा

import {HttpClient} from './http-client';

export classMyComponent {
  constructor(httpClient: HttpClient) {
    this.httpClient = httpClient;
  }

  handleSomething() {
    this.httpClient.post(url, data)
    ).subscribe(...);
  }
}

ऐसा कहा जाता है कि शायद इस तरह एंगुलर 2 में योगदान दिया जा सकता है ;-)

उम्मीद है कि यह आपकी मदद करता है, थियरी


एक .ts फ़ाइल बनाएँ

import { Injectable } from '@angular/core';
import {Request, XHRBackend, XHRConnection} from '@angular/http';


    @Injectable()
    export class ApiXHRBackend extends XHRBackend {
    createConnection(request: Request): XHRConnection {
    if (request.url.startsWith('/api')){
    var url=request.url.replace("/api", "");
    request.url = 'http://localhost:8080' + url; // prefix base url
    }
    return super.createConnection(request);
    }

}

फिर app.module.ts में

import { ApiXHRBackend } from './guard/httpintercepter';
import {Request, XHRBackend, XHRConnection} from '@angular/http';

प्रदाता अनुभाग में प्रदाता जोड़ें

providers: [
{provide: XHRBackend, useClass: ApiXHRBackend }
],

फिर आपकी सेवा में। http कॉल नीचे उदाहरण की तरह होना चाहिए

return this._http.post("/api/customerservice/loginvalidation",data)
.map((response: Response) => {
return response;
});

यहां / एपीआई को आपके मूल यूआरएल http: // localhost: 8080 द्वारा प्रतिस्थापित किया जाएगा

अधिक जानकारी http://shabeen.in/webschool/how-to-set-angular-2-service-http-base-url/ सेवा- http://shabeen.in/webschool/how-to-set-angular-2-service-http-base-url/ url http://shabeen.in/webschool/how-to-set-angular-2-service-http-base-url/


कोणीय 4.3+ और @ कोणीय / सामान्य / http के लिए

यह interceptors के साथ आसान है

@Injectable()
export class ExampleInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const url = 'http://myurl.com';
    req = req.clone({
      url: url + req.url
    });
    return next.handle(req);
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { Injectable } from '@angular/core';
import { HttpClientModule, HttpRequest, HTTP_INTERCEPTORS } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    ...
  ],
  providers: [
    AppComponent,
    { provide: HTTP_INTERCEPTORS, useClass: ExampleInterceptor, multi: true }
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

संपादित करें: एंगुलर 4.3 में एचटीपी क्लाइंट और एचटीपी इंटरसेप्टर पेश किए गए हैं





angular2-http