कोणीय 4 ऐप का परीक्षण करने के लिए नकली वेब सेवा बनाने के लिए किसका उपयोग करना है?
कोणीय 4 ऐप का परीक्षण करने के लिए नकली वेब सेवा बनाने के लिए किसका उपयोग करना है?
जवाबों:
यदि आप कोणीय 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',
node_modules
फ़ोल्डर निकालें और npm install
फिर से चलाएं
'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',
दोहरावदार नहीं होना चाहते हैं, लेकिन बस दूसरे तरीके से संक्षेप में प्रस्तुत करना चाहते हैं (नई HttpClient में जोड़ी गई विशेषताएं):
मैंने एक लेख लिखा, जहां मैंने पुराने "http" और नए "HttpClient" के बीच अंतर को कवर किया। लक्ष्य यह था कि इसे सबसे आसान तरीके से समझाया जाए।
यह एक अच्छा संदर्भ है, इसने मुझे मेरे 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';
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);
});
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);
}
}
यह एक बहुत अच्छा उन्नयन है!
एक पुस्तकालय है जो आपको HttpClient को जोरदार टाइपबैक कॉलबैक के साथ उपयोग करने की अनुमति देता है ।
डेटा और त्रुटि इन कॉलबैक के माध्यम से सीधे उपलब्ध हैं।
जब आप अवलोकन के साथ HttpClient का उपयोग करते हैं, तो आपको अपने बाकी कोड में .subscribe (x => ...) का उपयोग करना होगा।
इसका कारण यह है है नमूदार < HttpResponse
< T
>> से जुड़ा हुआ है HttpResponse ।
यह आपके बाकी कोड के साथ http लेयर को कसकर जोड़ देता है ।
यह लाइब्रेरी अतिक्रमण करती है। सदस्यता समाप्त करें (x => ...) भाग करता है और आपके मॉडल के माध्यम से केवल डेटा और त्रुटि को उजागर करता है।
दृढ़ता से टाइप किए गए कॉलबैक के साथ, आपको केवल अपने मॉडल के साथ अपने बाकी कोड में व्यवहार करना होगा।
पुस्तकालय को कोणीय-विस्तारित-http-क्लाइंट कहा जाता है ।
GitHub पर कोणीय-विस्तारित-http- क्लाइंट लाइब्रेरी
एनपीएम पर कोणीय-विस्तारित-HTTP-क्लाइंट लाइब्रेरी
उपयोग करने के लिए बहुत आसान है।
जोरदार टाइपबैक कॉलबैक हैं
सफलता:
T
>T
>विफलता:
TError
>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<
टी >
> लौटा सकते हैं ।
HttpClient 4.3 के साथ आया एक नया एपीआई है, यह एपीआई की प्रगति की घटनाओं के लिए समर्थन के साथ अद्यतन किया है, डिफ़ॉल्ट रूप से json deserialization, इंटरसेप्टर और कई अन्य महान विशेषताएं हैं। यहाँ और देखें https://angular.io/guide/http
Http पुराना API है और अंततः इसे अपग्रेड किया जाएगा।
चूँकि उनका उपयोग मूल कार्यों के लिए बहुत समान है इसलिए मैं HttpClient का उपयोग करने की सलाह दूंगा क्योंकि यह वैकल्पिक उपयोग करने के लिए अधिक आधुनिक और आसान है।