angular - HttpModule এবং HttpClientModule এর মধ্যে পার্থক্য




(4)

অ্যাঙ্গুলার 4 অ্যাপটি পরীক্ষা করতে কোনটি মক ওয়েব পরিষেবা তৈরি করতে ব্যবহার করবেন?


আপনি যদি কৌণিক 4.3.x এবং উপরের ব্যবহার করে থাকেন তবে HttpClientModule থেকে HttpClientModule HttpClient ক্লাসটি ব্যবহার করুন:

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

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

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

এটি নীচের উন্নতিগুলির সাথে @angular/http মডিউল থেকে http এর একটি আপগ্রেড সংস্করণ:

  • ইন্টারসেপ্টররা পাইপলাইনে মিডলওয়্যার যুক্তি সন্নিবেশ করার অনুমতি দেয়
  • অনিবার্য অনুরোধ / প্রতিক্রিয়া অবজেক্টস
  • উভয় অনুরোধ আপলোড এবং প্রতিক্রিয়া ডাউনলোডের জন্য অগ্রগতি ইভেন্ট

এটি কৌনিকটিতে ইন্টারসেপ্টর এবং এইচটিপিপিপ্লায়েন্ট মেকানিক্সের জন্য অন্তর্নিহিতদের গাইডে কীভাবে কাজ করে সে সম্পর্কে আপনি পড়তে পারেন।

  • টাইপড, সিঙ্ক্রোনাস প্রতিক্রিয়া দেহের অ্যাক্সেস, জেএসওএন শরীরের ধরণের সমর্থন সহ
  • জেএসএন হ'ল একটি অনুমিত ডিফল্ট এবং আর স্পষ্টভাবে পার্স করার দরকার নেই
  • অনুরোধের পরে যাচাইকরণ এবং ফ্লাশ ভিত্তিক পরীক্ষার কাঠামো

পুরানো HTTP ক্লায়েন্টকে অগ্রাহ্য করা হবে। প্রতিশ্রুতি বার্তা এবং angular.io/guide/http লিঙ্কগুলি এখানে।

এছাড়াও মনোযোগ দিন যে পুরানো এইচটিপি নতুন HttpClient পরিবর্তে এইচটিটিপি ক্লাস টোকেন ব্যবহার করে ইনজেকশন দেওয়া হয়েছিল:

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

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

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

এছাড়াও, নতুন HttpClient রানটাইমের সময় tslib প্রয়োজন বলে মনে হচ্ছে, সুতরাং আপনি এটি npm i tslib ইনস্টল করতে হবে যদি আপনি SystemJS ব্যবহার SystemJS :

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

আপনি যদি সিস্টেমজেএস ব্যবহার করেন তবে আপনাকে অন্য ম্যাপিং যুক্ত করতে হবে:

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

এখানে একটি লাইব্রেরি রয়েছে যা আপনাকে দৃ strongly়-টাইপযুক্ত কলব্যাক সহ HTTPClient ব্যবহার করতে দেয়।

এই কলব্যাকগুলির মাধ্যমে ডেটা এবং ত্রুটি সরাসরি উপলব্ধ।

আপনি যখন পর্যবেক্ষণযোগ্য এইচটিপিপিপ্লায়েন্ট ব্যবহার করেন তখন আপনাকে আপনার বাকী কোডে .subscribe (x => ...) ব্যবহার করতে হবে।

এটি কারণ পর্যবেক্ষণযোগ্য < HttpResponse < T >> এইচটিপিআরস্পোনসের সাথে আবদ্ধ।

এটি আপনার বাকী কোডের সাথে HTTP স্তরটিকে শক্তভাবে জুড়ে দেয়।

এই গ্রন্থাগারটি। সাবস্ক্রাইব (x => ...) অংশটি encapsulates এবং কেবল আপনার মডেলগুলির মাধ্যমে ডেটা এবং ত্রুটি প্রকাশ করে।

দৃ strongly়ভাবে টাইপযুক্ত কলব্যাকগুলি সহ, আপনাকে কেবল আপনার বাকী কোডগুলিতে আপনার মডেলগুলির সাথে ডিল করতে হবে।

লাইব্রেরিটি কৌণিক-বর্ধিত-এইচপি-ক্লায়েন্ট নামে অভিহিত হয়।

গিটহাবের কৌণিক-প্রসারিত-এইচটিপি-ক্লায়েন্ট লাইব্রেরি

এনপিএম-এ কৌণিক-বর্ধিত-এইচ-পি-পি-ক্লায়েন্ট লাইব্রেরি

ব্যবহার করা খুব সহজ।

নমুনা ব্যবহার

প্রবলভাবে টাইপযুক্ত কলব্যাকগুলি হ'ল

সাফল্য:

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

ব্যর্থতা:

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

আপনার প্রকল্পে এবং আপনার অ্যাপ্লিকেশন মডিউলে প্যাকেজ যুক্ত করুন

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

এবং @ এনজিএমডিউল আমদানিতে

  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 এপিআই নীচে প্রদর্শিত হিসাবে ডাকা হয়েছে।

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

  }

উভয়ই, প্রতিক্রিয়া এবং কলব্যাকগুলিতে ফিরে আসা ত্রুটি দৃ strongly়ভাবে টাইপ করা হয়। যেমন। প্রতিক্রিয়া হ'ল রেসিংআরস্পোন টাইপ এবং ত্রুটি হল APIException

আপনি কেবলমাত্র এই মডেলগুলিকে দৃ strongly়ভাবে টাইপযুক্ত কলব্যাকগুলিতে ডিল করেন।

সুতরাং, আপনার কোডের বাকী অংশগুলি কেবল আপনার মডেলগুলি সম্পর্কে জানে।

এছাড়াও, আপনি এখনও traditional HttpResponse< রুটটি ব্যবহার করতে পারেন এবং পরিষেবা API থেকে পর্যবেক্ষণযোগ্য < HttpResponse< টি HttpResponse< ফিরে আসতে পারেন।


পুনরাবৃত্তি হতে চান না, তবে কেবল অন্যভাবে সংক্ষিপ্তসার করতে:

  • জেএসএন থেকে কোনও বস্তুতে স্বয়ংক্রিয় রূপান্তর
  • প্রতিক্রিয়া টাইপ সংজ্ঞা
  • ইভেন্ট গুলিবর্ষণ
  • শিরোনামের জন্য সরলীকৃত বাক্য গঠন
  • interceptors

আমি একটি নিবন্ধ লিখেছিলাম, যেখানে আমি পুরানো "এইচটিপি" এবং নতুন "এইচটিপিপিলেট" এর মধ্যে পার্থক্যটি কভার করেছি। লক্ষ্যটি ছিল সহজতম পদ্ধতিতে এটি ব্যাখ্যা করা।

কেবল কৌণিক এ নতুন এইচটিপিপিলেট সম্পর্কে


এইচটিপিপ্লিনেন্ট একটি নতুন এপিআই যা ৪.৩ নিয়ে আসে, এটি অগ্রগতি ইভেন্টগুলির জন্য সমর্থন, ডিফল্টরূপে জসন ডিসিরিয়ালাইজেশন , ইন্টারসেপ্টর এবং আরও অনেক দুর্দান্ত বৈশিষ্ট্য সহ এপিআই আপডেট করেছে updated এখানে আরও দেখুন angular.io/guide/http

এইচটিটিপি হ'ল পুরানো এপিআই এবং অবশেষে হ্রাস করা হবে।

যেহেতু তাদের ব্যবহারগুলি বুনিয়াদি কাজের জন্য অনুরূপ তবে আমি এইচটিটিপিপ্লিনেন্ট ব্যবহারের পরামর্শ দেব কারণ এটি আরও আধুনিক এবং সহজ বিকল্প হিসাবে ব্যবহারযোগ্য।








httpclient