Angular 4 के लिए एक शुरुआती गाइड: HTTP

Hindi (हिंदी) translation by Shaurya (you can also view the original English article)

पिछले ट्यूटोरियल में, आपने देखा कि Angular रूटिंग का उपयोग करके Angular वेब एप्लीकेशंस में रूटिंग को कैसे लागू किया जाए।

इस ट्यूटोरियल में, आप सीखेंगे की Angular HttpClient का उपयोग करते हुए एक Angular एप्लीकेशन से वेब API और सर्विसेज के साथ कम्युनिकेट कैसे करें।

Angular HttpClient

आप ब्राउजर से सर्वर-साइड API कॉल करने के लिए XMLHttpRequest(XHR) ऑब्जेक्ट का उपयोग करते हैं। XHR ऑब्जेक्ट पूरे पेज को फिर से लोड किए बिना वेब पेज के एक हिस्से को अपडेट करना संभव बनाता है। वेब पेज लोड होने के बाद आप सर्वर से डाटा भेज सकते हैं और प्राप्त कर सकते हैं।

Angular HttpClient XHR ऑब्जेक्ट के लिए एक रैपर (wrapper) प्रदान करता है, जिससे Angular एप्लीकेशन से API कॉल करना आसान हो जाता है।

आधिकारिक दस्तावेजों से:

HttpClient के साथ, @angular/common/http, ब्राउज़र द्वारा एक्सपोज़ किये गए XMLHttpRequest इंटरफ़ेस के टॉप पर बनायीं गयी Angular एप्लीकेशन के साथ HTTP फंक्शनैलिटी के लिए एक सरल API प्रदान करता है। HttpClient के कुछ अतिरिक्त लाभों में शामिल हैं टेस्ट करने की क्षमता का सपोर्ट, रिक्वेस्ट और रिस्पांस ऑब्जेक्ट के स्ट्रांग टाइप, रिक्वेस्ट रिस्पांस इंटरसेप्टर का सपोर्ट, और Observables पर आधारित apis के जरिए बेहतर एरर को हैंडल करना।

शुरू करते हैं

आप ट्यूटोरियल सीरीज के पहले भाग से सोर्स कोड को क्लोन करके शुरू करेंगे।

git clone https://github.com/royagasthyan/AngularComponent.git

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

cd AngularComponent
npm install

डिपेंडेंसीज के इंस्टॉल हो जाने के बाद, निम्न कमांड टाइप करके एप्लीकेशन शुरू करें:

ng serve

आपके पास http://localhost:4200/ पर चलने वाला एक एप्लीकेशन होना चाहिए।

अपने Angular प्रोजेक्ट में HttpClient मॉड्यूल का उपयोग करने के लिए, आपको इसे पहले अपने app.module.ts फाइल में इंपोर्ट करना होगा।

प्रोजेक्ट डायरेक्टरी से, src/app/app.module.ts पर जाएं। app.module.ts फाइल में, HttpClientModule को इंपोर्ट करें।

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

imports सेक्शन के अंदर HttpClientModule को इंक्लूड करें।

imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ]

यहां आप देख सकते हैं कि app.module.ts फाइल कैसी दिखती है।

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CalcComponent } from './calc/calc.component'
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    CalcComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

अब आप अपने किसी भी Angular कॉम्पोनेंट में HttpClientModule को इंपोर्ट करके अपनी पूरी Angular एप्लीकेशन में इसका प्रयोग करने योग्य हो चुके हैं।

Angular कॉम्पोनेंट बनाना

आइए Angular कॉम्पोनेंट बनाकर शुरुआत करते हैं। src/app फोल्डर के अंदर get-data नाम का एक फोल्डर बनाएं। get-data.component.ts नाम की एक फाइल बनाएं और उसमें निम्नलिखित कोड को जोड़ें:

import { Component } from '@angular/core';

@Component({
  selector: 'get-data',
  templateUrl: 'get-data.component.html',
  styleUrls: ['get-data.component.css']
})
export class GetDataComponent {

    constructor(){
  	
	}

}

get-data.component.html नाम की एक फाइल बनाएं, जो get-data कॉम्पोनेंट के लिए टेंप्लेट फाइल के रूप में काम करेगी। get-data.component.html फाइल के अंदर निम्नलिखित कोड को जोड़ें:

<h3>
    Get Data Component
</h3>

GetDataComponent को src/app/app.module.ts फाइल में इंपोर्ट करें।

import { GetDataComponent } from './get-data/get-data.component';

app.module.ts के अंदर ngModule में GetDataComponent को जोड़ें।

  declarations: [
    AppComponent,
    CalcComponent,
    GetDataComponent
  ]

यहां बताया गया है कि मॉडिफाई हो चुकी app.module.ts फाइल अब कैसी दिखती है:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { CalcComponent } from './calc/calc.component';
import { GetDataComponent } from './get-data/get-data.component';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    CalcComponent,
    GetDataComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html फाइल में get-data कॉम्पोनेंट सिलेक्टर को जोड़ें। यहां देख सकते हैं कि यह कैसी दिखती है।

<div style="text-align:center">
  <get-data></get-data>
</div>

ऊपर किए गए सभी परिवर्तनों को सेव करें और सर्वर शुरू करें। आप एप्लीकेशन लोड होने पर get-data कॉम्पोनेंट को देख पाएंगे।

Angular HttpClient मॉड्यूल का उपयोग करना

API कॉल करने के लिए आप HttpClient मॉड्यूल का उपयोग करेंगे। आइए अलग से एक फाइल बनाएं जिसमें हम Angular सर्विस को बनाएंगे, जिससे हम API कॉल कर सकें। get-data.service.ts नाम की एक फाइल बनाएं। निम्नलिखित कोड को get-data.service.ts फाइल के अंदर डाल दें:

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

@Injectable()
export class GetDataService {

    constructor() {
        
    }

}

HttpClient मॉड्यूल को ऊपर दी गई GetDataService में इंपोर्ट करें।

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

GetDataService कंस्ट्रक्टर में HttpClient को शुरू करें।

constructor(private http: HttpClient) {
    
}

एक call_api नाम का मेथड बनाएं जिससे आप GetDataService फाइल के अंदर GET API कॉल बना सके। API कॉल करने के लिए आप एक वर्ड सिनोनिम फाइंडर API का उपयोग करेंगे। यहां आप देख सकते हैं कि call_api मेथड किस तरह दिखता है:

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

यहां बताया गया है कि get-data.service.ts फाइल कैसी दिखती है:

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

@Injectable()
export class GetDataService {

    url: string
    constructor(private http: HttpClient) {
        this.url = 'https://api.datamuse.com/words?ml='
    }

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

जैसे कि ऊपर दी गई GetDataService क्लास में देखा गया है, call_api मेथड एक observable को रिटर्न करता है जिसमें आप GetDataComponent से सब्सक्राइब कर सकते हैं।

GetDataComponent के कंस्ट्रक्टर से सब्सक्राइब करने के लिए, आप GetDataComponent के अंदर GetDataService को इंपोर्ट करना होगा।

import { GetDataService } from './get-data.service';

GetDataService को GetDataComponent के प्रोवाइडर के रूप में डिफाइन करें।

@Component({
  selector: 'get-data',
  templateUrl: 'get-data.component.html',
  styleUrls: ['get-data.component.css'],
  providers:[ GetDataService ]
})

आइए GetDataComponent के कंस्ट्रक्टर मेथड से सब्सक्राइब करें।

constructor(private dataService: GetDataService){
	this.dataService.call_api('hello').subscribe(response => {
		console.log('Response is ', response);
	})
}

यहां आप देख सकते हैं कि get-data.component.ts फाइल किस तरह दिखती है:

import { Component } from '@angular/core';
import { GetDataService } from './get-data.service';

@Component({
  selector: 'get-data',
  templateUrl: 'get-data.component.html',
  styleUrls: ['get-data.component.css'],
  providers:[ GetDataService ]
})
export class GetDataComponent {

    constructor(private dataService: GetDataService){
		this.dataService.call_api('hello').subscribe(response => {
			console.log('Response is ', response);
		})
	}

}

ऊपर किए गए सभी परिवर्तनों को सेव करें और सर्वर को रीस्टार्ट करें। आप ब्राउज़र के कंसोल में लॉग-इन करके परिणाम देख सकते हैं।

ऊपर दिए गए कोड में, आपने देखा कि Angular HttpClient का उपयोग करके GET API को रिक्वेस्ट कैसे किया जाता है।

POST रिक्वेस्ट करने के लिए, आपको http.post मेथड का उपयोग करना होगा।

this.http.post(url, {key : value});

जैसा कि ऊपर दिए कोड में आपने देखा है, आप को API पोस्ट URL और डाटा को दूसरे पैरामीटर के रूप में पोस्ट करना पड़ेगा।

API कॉल करते समय एरर्स को हैंडल करना

जब भी आप एक API कॉल करते हैं, तो एक एरर का सामना करने की बराबर संभावना बनी रहती है। API कॉल करते समय एरर्स को संभालने के लिए, आपको response हैंडलर के साथ subscribe मेथड में एरर हैंडलर जोड़ना होगा।

GetDataComponent में परिवर्तित किए हुए कोड कुछ इस तरह दिखते हैं:

constructor(private dataService: GetDataService){
	this.dataService.call_api('hello').subscribe(response => {
		console.log('Response is ', response);
	}, err => {
		console.log('Something went wrong ', err);
	})
}

एक ऐसा URL बनाने के लिए जो मौजूद ही नहीं है get-data.service.ts फाइल में url वेरिएबल को मॉडिफाई करें, जो API कॉल करते समय एक एरर का कारण होगा।

this.url = 'https://ai.datamuse.com/words?ml='

ऊपर किए गए सभी परिवर्तनों को सेव करें और सर्वर को रीस्टार्ट करें। ब्राउज़र कंसोल की जांच करें और आपके पास एरर हैंडलर मेथड और एरर लॉग कॉल किया हुआ होगा।

एरर ऑब्जेक्ट में एरर के बारे में सभी डिटेल्स होती हैं जैसे एरर कोड, एरर मैसेज, आदि। यह API कॉल के साथ क्या गलत हुआ है, इसकी गहराई से जानकारी देता है। यहां आप देख सकते हैं कि ब्राउजर कंसोल लॉग कैसा दिखता है:

जैसे कि ऊपर कंट्रोल लॉग में देखा गया है, एरर ऑब्जेक्ट से सभी एरर डीटेल्स प्राप्त किए जा सकते हैं।

सब कुछ खत्म करते हुए

इस ट्यूटोरियल में, आपने देखा कि API कॉल करने के लिए Angular HttpClientModule का उपयोग कैसे करें। आपने सर्वर API को GET और POST रिक्वेस्ट करने के लिए HttpClientModule को इंपोर्ट करने का तरीका सीखा। API कॉल करते समय आपने देखा कि एरर को कैसे हैंडल करना है।

Angular HttpClientModule का प्रयोग करके API कॉल किस प्रकार करें यह सीखने का आपका अनुभव कैसा रहा? नीचे कमेंट में अपने विचारों को हमें बताएं।

इस ट्यूटोरियल से सोर्स कोड आपको GitHub में मिल जाएंगे।