HttpModule और HttpClientModule के बीच अंतर

Question

कोणीय 4 ऐप का परीक्षण करने के लिए नकली वेब सेवा बनाने के लिए किसका उपयोग करना है?

Comments

"HttpClient मौजूदा कोणीय HTTP एपीआई का एक विकास है, जो एक अलग पैकेज में इसके साथ मौजूद है ..." ।

— जोंशरशेप

मैंने कल अपने ब्लॉग पर इसकी कुछ नई विशेषताओं के बारे में लिखा था: blog.jonrshar.pe/2017/Jul/15/angular-http-client.html

— jonrsharpe

angular.io/guide/http

— yurzui

ट्यूटोरियल HttpModule और angular.io/guide/http का उपयोग करता है HttpClientModule का उपयोग करता है और न ही यह बताता है कि एक या दूसरे का उपयोग कब किया जाना चाहिए या क्या उपयोग करने के लिए कोणीय के संस्करण की आवश्यकता है।

— मिकी सेगल

RESTFul

— कोड जासूस

Answer 1

यदि आप कोणीय 4.3.x और ऊपर का उपयोग कर रहे हैं तो HttpClientकक्षा का उपयोग करें HttpClientModule:

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

@NgModule({
 imports: [
   BrowserModule,
   HttpClientModule
 ],
 ...

 class MyService() {
    constructor(http: HttpClient) {...}

यह निम्नलिखित सुधारों के साथ मॉड्यूल httpसे उन्नत संस्करण है @angular/http:

• इंटरसेप्टर मिडलवेयर लॉजिक को पाइपलाइन में डालने की अनुमति देते हैं
• अपरिवर्तनीय अनुरोध / प्रतिक्रिया ऑब्जेक्ट
• अनुरोध अपलोड और प्रतिक्रिया डाउनलोड दोनों के लिए प्रगति की घटनाएं

आप इस बारे में पढ़ सकते हैं कि यह इंसाइडर्स गाइड में इंटरसेप्टर में काम करता है और एंगुलर में हेटक्लाइकेंट मैकेनिक्स ।

• JSON बॉडी टाइप के लिए सपोर्ट सहित टाइप, सिंक्रोनस रिस्पांस बॉडी एक्सेस
• JSON एक माना हुआ डिफ़ॉल्ट है और अब इसे स्पष्ट रूप से पार्स करने की आवश्यकता नहीं है
• अनुरोध के बाद सत्यापन और फ्लश आधारित परीक्षण रूपरेखा

आगे जाकर पुराने http क्लाइंट को हटा दिया जाएगा। यहां कमिट मैसेज और आधिकारिक डॉक्स के लिंक दिए गए हैं ।

यह भी ध्यान दें कि पुराने http को Httpनए के बजाय क्लास टोकन का उपयोग करके इंजेक्ट किया गया था HttpClient:

import { HttpModule } from '@angular/http';

@NgModule({
 imports: [
   BrowserModule,
   HttpModule
 ],
 ...

 class MyService() {
    constructor(http: Http) {...}

इसके अलावा, रनटाइम में नए HttpClientकी आवश्यकता होती tslibहै, इसलिए आपको इसे इंस्टॉल करना होगा npm i tslibऔर system.config.jsयदि आप उपयोग कर रहे हैं तो अपडेट करें SystemJS:

map: {
     ...
    'tslib': 'npm:tslib/tslib.js',

यदि आप SystemJS का उपयोग करते हैं तो आपको एक और मैपिंग जोड़ने की आवश्यकता है:

'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',

Comments

मैं HttpClientModule आयात करने का प्रयास कर रहा हूं। लेकिन '@ कोणीय / सामान्य / http' नोड_मॉडल्स निर्देशिका में मौजूद नहीं है, जिसे मैंने "एनपीएम स्टार्ट" कमांड का उपयोग करके स्थापित किया है। क्या आप मदद कर सकते हैं?

— धीरज कुमार

@ धीरजकुमार, आप किस संस्करण का उपयोग कर रहे हैं? यह केवल 4.3.0 और ऊपर

— मैक्स कोर्सेटस्की

मैंने गिट से कोणीय त्वरित शुरुआत डाउनलोड की। और इन पैकेज.जसन, "@ कोणीय / आम": "^ 4.3.0" मौजूद है। लेकिन कोई कोणीय / आम / http नहीं है।

— धीरज कुमार

node_modulesफ़ोल्डर निकालें और npm installफिर से चलाएं

— अधिकतम कोरसेटकी

मैंने इसे बहुत ही समस्या में चलाया है (मैं System.js का उपयोग कर रहा हूं)। इस उत्तर से एक बात याद आ रही है कि आपको system.js में नए मॉड्यूल को मैप करने की भी आवश्यकता होगी: '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',

— Tyler O

Answer 2

दोहरावदार नहीं होना चाहते हैं, लेकिन बस दूसरे तरीके से संक्षेप में प्रस्तुत करना चाहते हैं (नई HttpClient में जोड़ी गई विशेषताएं):

• किसी वस्तु पर JSON से स्वचालित रूपांतरण
• प्रतिक्रिया प्रकार परिभाषा
• घटना फायरिंग
• हेडर के लिए सरलीकृत वाक्यविन्यास
• इंटरसेप्टर

मैंने एक लेख लिखा, जहां मैंने पुराने "http" और नए "HttpClient" के बीच अंतर को कवर किया। लक्ष्य यह था कि इसे सबसे आसान तरीके से समझाया जाए।

बस नए HttpClient के बारे में कोणीय में

Answer 3

यह एक अच्छा संदर्भ है, इसने मुझे मेरे HTTP अनुरोधों को httpClient पर स्विच करने में मदद की

https://blog.hackages.io/angular-http-httpclient-same-but-different-86a50bbcc450

यह मतभेदों के संदर्भ में दोनों की तुलना करता है और कोड उदाहरण देता है।

यह कुछ अंतर है जो मैंने अपनी परियोजना में httpclient में सेवाओं को बदलते समय निपटाया था (मेरे द्वारा उल्लिखित लेख से उधार लेना):

आयात कर रहा है

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

अनुरोध और पार्सिंग प्रतिक्रिया:

@ कोणीय / http

 this.http.get(url)
      // Extract the data in HTTP Response (parsing)
      .map((response: Response) => response.json() as GithubUser)
      .subscribe((data: GithubUser) => {
        // Display the result
        console.log('TJ user data', data);
      });

@ कोणीय / आम / http

 this.http.get(url)
      .subscribe((data: GithubUser) => {
        // Data extraction from the HTTP response is already done
        // Display the result
        console.log('TJ user data', data);
      });

ध्यान दें: आपको अब दिए गए डेटा को स्पष्ट रूप से नहीं निकालना है; डिफ़ॉल्ट रूप से, यदि आपको वापस मिलने वाला डेटा JSON का प्रकार है, तो आपको कुछ अतिरिक्त करने की आवश्यकता नहीं है।

लेकिन, अगर आपको पाठ या बूँद जैसी किसी अन्य प्रकार की प्रतिक्रिया को पार्स करने की आवश्यकता है, तो सुनिश्चित करें कि आप responseTypeअनुरोध में जोड़ सकते हैं । इस तरह:

responseTypeविकल्प के साथ GET HTTP अनुरोध करना :

 this.http.get(url, {responseType: 'blob'})
      .subscribe((data) => {
        // Data extraction from the HTTP response is already done
        // Display the result
        console.log('TJ user data', data);
      });

इंटरसेप्टर जोड़ना

मैंने अपने अनुरोध में प्रत्येक अनुरोध के लिए टोकन जोड़ने के लिए इंटरसेप्टर का उपयोग किया:

यह एक अच्छा संदर्भ है: https://offering.solutions/blog/articles/2017/07/19/angular-2-new-http-interface-with-interceptors/

इस तरह:

@Injectable()
export class MyFirstInterceptor implements HttpInterceptor {

    constructor(private currentUserService: CurrentUserService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        // get the token from a service
        const token: string = this.currentUserService.token;

        // add it if we have one
        if (token) {
            req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) });
        }

        // if this is a login-request the header is 
        // already set to x/www/formurl/encoded. 
        // so if we already have a content-type, do not 
        // set it, but if we don't have one, set it to 
        // default --> json
        if (!req.headers.has('Content-Type')) {
            req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
        }

        // setting the accept header
        req = req.clone({ headers: req.headers.set('Accept', 'application/json') });
        return next.handle(req);
    }
}

यह एक बहुत अच्छा उन्नयन है!

Comments

आपको अपने उत्तर में प्रासंगिक जानकारी को शामिल करने की आवश्यकता है, न कि केवल एक लिंक के रूप में

— माइकल

Answer 4

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

डेटा और त्रुटि इन कॉलबैक के माध्यम से सीधे उपलब्ध हैं।

जब आप अवलोकन के साथ HttpClient का उपयोग करते हैं, तो आपको अपने बाकी कोड में .subscribe (x => ...) का उपयोग करना होगा।

इसका कारण यह है है नमूदार < HttpResponse< T>> से जुड़ा हुआ है HttpResponse ।

यह आपके बाकी कोड के साथ http लेयर को कसकर जोड़ देता है ।

यह लाइब्रेरी अतिक्रमण करती है। सदस्यता समाप्त करें (x => ...) भाग करता है और आपके मॉडल के माध्यम से केवल डेटा और त्रुटि को उजागर करता है।

दृढ़ता से टाइप किए गए कॉलबैक के साथ, आपको केवल अपने मॉडल के साथ अपने बाकी कोड में व्यवहार करना होगा।

पुस्तकालय को कोणीय-विस्तारित-http-क्लाइंट कहा जाता है ।

GitHub पर कोणीय-विस्तारित-http- क्लाइंट लाइब्रेरी

एनपीएम पर कोणीय-विस्तारित-HTTP-क्लाइंट लाइब्रेरी

उपयोग करने के लिए बहुत आसान है।

नमूना उपयोग

जोरदार टाइपबैक कॉलबैक हैं

सफलता:

• IObservable < T>
• IObservableHttpResponse
• IObservableHttpCustomResponse < T>

विफलता:

• IObservableError < TError>
• IObservableHttpError
• IObservableHttpCustomError < TError>

अपनी परियोजना और अपने ऐप मॉड्यूल में पैकेज जोड़ें

import { HttpClientExtModule } from 'angular-extended-http-client';

और @NgModule आयात में

  imports: [
    .
    .
    .
    HttpClientExtModule
  ],

आपके मॉडल

//Normal response returned by the API.
export class RacingResponse {
    result: RacingItem[];
}

//Custom exception thrown by the API.
export class APIException {
    className: string;
}

सेवा में

आपकी सेवा में, आप इन कॉलबैक प्रकारों के साथ सिर्फ परम बनाते हैं।

फिर, उन्हें HttpClientExt की विधि प्राप्त करें।

import { Injectable, Inject } from '@angular/core'
import { RacingResponse, APIException } from '../models/models'
import { HttpClientExt, IObservable, IObservableError, ResponseType, ErrorType } from 'angular-extended-http-client';
.
.

@Injectable()
export class RacingService {

    //Inject HttpClientExt component.
    constructor(private client: HttpClientExt, @Inject(APP_CONFIG) private config: AppConfig) {

    }

    //Declare params of type IObservable<T> and IObservableError<TError>.
    //These are the success and failure callbacks.
    //The success callback will return the response objects returned by the underlying HttpClient call.
    //The failure callback will return the error objects returned by the underlying HttpClient call.
    getRaceInfo(success: IObservable<RacingResponse>, failure?: IObservableError<APIException>) {
        let url = this.config.apiEndpoint;

        this.client.get(url, ResponseType.IObservable, success, ErrorType.IObservableError, failure);
    }
}

आपका घटक

आपके घटक में, आपकी सेवा को इंजेक्ट किया जाता है और getRaceInfo API को नीचे दिखाया गया है।

  ngOnInit() {    
    this.service.getRaceInfo(response => this.result = response.result,
                                error => this.errorMsg = error.className);

  }

कॉलबैक में लौटाए गए दोनों जवाब और त्रुटि दृढ़ता से टाइप किए गए हैं। उदाहरण के लिए। प्रतिक्रिया प्रकार है RacingResponse और त्रुटि है APIException ।

आप केवल अपने मॉडलों के साथ इन दृढ़ता से टाइप किए गए कॉलबैक से निपटते हैं।

इसलिए, आपके बाकी कोड केवल आपके मॉडल के बारे में जानते हैं।

इसके अलावा, आप अभी भी पारंपरिक मार्ग का उपयोग कर सकते हैं और सेवा एपीआई से ऑब्जर्वेबल < HttpResponse<टी >> लौटा सकते हैं ।

Answer 5

HttpClient 4.3 के साथ आया एक नया एपीआई है, यह एपीआई की प्रगति की घटनाओं के लिए समर्थन के साथ अद्यतन किया है, डिफ़ॉल्ट रूप से json deserialization, इंटरसेप्टर और कई अन्य महान विशेषताएं हैं। यहाँ और देखें https://angular.io/guide/http

Http पुराना API है और अंततः इसे अपग्रेड किया जाएगा।

चूँकि उनका उपयोग मूल कार्यों के लिए बहुत समान है इसलिए मैं HttpClient का उपयोग करने की सलाह दूंगा क्योंकि यह वैकल्पिक उपयोग करने के लिए अधिक आधुनिक और आसान है।