http - কৌণিক 2 তে কি সমপরিমাণ?




angular (7)

@ গন্টার যেমন এটি উল্লেখ করেছেন, ইন্টারসেপ্টরগুলি নিবন্ধ করার কোনও উপায় নেই। আপনাকে এইচটিটিপি ক্লাসটি প্রসারিত করতে হবে এবং এইচটিটিপি কলগুলিতে আপনার ইন্টারসেপশন প্রসেসিং করা উচিত

প্রথমে আপনি এমন একটি শ্রেণি তৈরি করতে পারেন যা Http প্রসারিত:

@Injectable()
export class CustomHttp extends Http {
  constructor(backend: ConnectionBackend, defaultOptions: RequestOptions) {
    super(backend, defaultOptions);
  }

  request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
    console.log('request...');
    return super.request(url, options).catch(res => {
      // do something
    });        
  }

  get(url: string, options?: RequestOptionsArgs): Observable<Response> {
    console.log('get...');
    return super.get(url, options).catch(res => {
      // do something
    });
  }
}

এবং নিচে বর্ণিত হিসাবে এটি নিবন্ধ করুন:

bootstrap(AppComponent, [HTTP_PROVIDERS,
    new Provider(Http, {
      useFactory: (backend: XHRBackend, defaultOptions: RequestOptions) => new CustomHttp(backend, defaultOptions),
      deps: [XHRBackend, RequestOptions]
  })
]);

লক্ষ্য পদ্ধতিগুলি বলার আগে request এবং request requestError যুক্ত করা যেতে পারে।

response জন্য, আপনাকে বিদ্যমান প্রসেসিং চেইনে কিছু অ্যাসিনক্রোনাস প্রসেসিং প্লাগ করতে হবে। এটি আপনার প্রয়োজনের উপর নির্ভর করে তবে আপনি পর্যবেক্ষণযোগ্য অপারেটরগুলি ( flatMap মতো) ব্যবহার করতে পারেন।

অবশেষে responseError জন্য, responseError কলটিতে আপনাকে catch অপারেটরকে কল করতে হবে। প্রতিক্রিয়াতে কোনও ত্রুটি দেখা দিলে আপনাকে জানানো হবে।

এই লিঙ্কগুলি আপনাকে সহায়তা করতে পারে:

কৌণিক জালগুলিতে, আমাদের কাছে HT ইন্টারপ্রেটার রয়েছে

$httpProvider.interceptors.push('myHttpInterceptor');

যার সাহায্যে আমরা সমস্ত HTTP কলগুলিতে প্রবেশ করতে পারি এবং লোডিং বারগুলি প্রদর্শন করতে বা আড়াল করতে, লগিং করা ইত্যাদি করতে পারি ..

কৌণিক 2 এর সমতুল্য কত?


@ স্কোয়াডুউশেল যেমন উল্লেখ করেছে, এই কার্যকারিতাটি @ কৌণিক / HTTP- তে আনার কাজ চলছে। এটি একটি নতুন এইচটিটিপিপ্লায়েন্ট এপিআই আকারে হবে।

আরও বিশদ এবং বর্তমান স্থিতির জন্য https://github.com/angular/angular/pull/17143 দেখুন।


এই সংগ্রহস্থলটিতে একটি এইচটিটিপি @ কৌণিক / মূল-মতো পরিষেবার জন্য একটি বাস্তবায়ন রয়েছে: https://github.com/voliva/angular2-interceptors

আপনি কেবল বুটস্ট্র্যাপে সেই পরিষেবাটির জন্য সরবরাহকারীকে ঘোষণা করুন, আপনার প্রয়োজনীয় কোনও ইন্টারসেপ্টর যুক্ত করুন এবং এটি সমস্ত উপাদানগুলির জন্য উপলব্ধ থাকবে।

import { provideInterceptorService } from 'ng2-interceptors';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...,
    HttpModule
  ],
  providers: [
    MyHttpInterceptor,
    provideInterceptorService([
      MyHttpInterceptor,
      /* Add other interceptors here, like "new ServerURLInterceptor()" or
         just "ServerURLInterceptor" if it has a provider */
    ])
  ],
  bootstrap: [AppComponent]
})

কৌণিক 2 donot সমর্থন কৌণিক 1 এর মত httpintercepter

এখানে কৌণিক 2 তে httpinterceptor ব্যবহারের দুর্দান্ত উদাহরণ।

https://github.com/NgSculptor/ng2HttpInterceptor


তেরাদাতা থেকে কোভ্যালেন্ট চেষ্টা করুন, তারা কৌণিক এবং কৌণিক পদার্থের জন্য প্রচুর এক্সটেনশান সরবরাহ করে।

HTTP অংশটি পরীক্ষা করুন, এটি কৌণিক এবং আরএসটিএস সার্ভিসে অনুপস্থিত এইচটিসিপি ইন্টারসেপ্টার সরবরাহ করে (পুনরায় সংযুক্তির অনুরূপ)।

আমি আমার নমুনায় HTTP মাধ্যমে HTTP টোকেন প্রমাণীকরণ প্রয়োগ করেছি, দয়া করে এখানে দেখুন।

https://github.com/hantsy/angular2-material-sample/blob/master/src/app/core/auth-http-interceptor.ts

এটির জন্য আমার বিকাশের নোটগুলি পড়ুন, আইএইচটিপিআইন্টারসেপ্টারের মাধ্যমে টোকেন ভিত্তিক প্রমাণীকরণ হ্যান্ডেল করুন


অবচিত সেন্স কৌনিক ৪.৩ (এইচটিপিআইএনটারেক্টরগুলি ৪.৩-এ ফিরে এসেছে)

আপনি আপনার নিজস্ব কাস্টম এইচটিটিপি ক্লাস তৈরি করতে পারেন এবং আপনার কাস্টম এইচটিপি ক্লাসটি পুনরায় ব্যবহার করতে এবং কাস্টম ক্লাসে আপনার আচরণগুলি প্রয়োগ করতে rxjs সাবজেক্ট পরিষেবা ব্যবহার করতে পারেন।

আপনার কাস্টম এইচটিপি ক্লাস বাস্তবায়নের সাথে "এইচটিটিপি সাবজেক্ট সার্ভিসেস" যা কিছু rxjs সাবজেক্টগুলিকে ধারণ করে।

import { Injectable } from '@angular/core';
import { Http, ConnectionBackend, Request, RequestOptions, RequestOptionsArgs, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';


import { HttpSubjectService } from './httpSubject.service';


@Injectable()
export class CustomHttp extends Http {
   constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private httpSubjectService: HttpSubjectService) {
       super(backend, defaultOptions);

       //Prevent Ajax Request Caching for Internet Explorer
       defaultOptions.headers.append("Cache-control", "no-cache");
       defaultOptions.headers.append("Cache-control", "no-store");
       defaultOptions.headers.append("Pragma", "no-cache");
       defaultOptions.headers.append("Expires", "0");
   }

   request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
       //request Start;
       this.httpSubjectService.addSpinner();
       return super.request(url, options).map(res => {
           //Successful Response;
           this.httpSubjectService.addNotification(res.json());
           return res;
       })
           .catch((err) => {
               //Error Response.
               this.httpSubjectService.removeSpinner();
               this.httpSubjectService.removeOverlay();

               if (err.status === 400 || err.status === 422) {
                   this.httpSubjectService.addHttp403(err);
                   return Observable.throw(err);
               } else if (err.status === 500) {
                   this.httpSubjectService.addHttp500(err);
                   return Observable.throw(err);
               } else {
                   return Observable.empty();
               }
           })
           .finally(() => {
               //After the request;
               this.httpSubjectService.removeSpinner();
           });
   }
}

আপনার কাস্টমএইচটিপি ক্লাসটি নিবন্ধ করার জন্য কাস্টম মডিউল - এখানে আপনি নিজের কাস্টমএইচটিপি প্রয়োগের সাথে অ্যাংুলার থেকে ডিফল্ট এইচটিটিপি বাস্তবায়ন ওভাররাইট করে।

import { NgModule, ValueProvider } from '@angular/core';
import { HttpModule, Http, XHRBackend, RequestOptions } from '@angular/http';

//Custom Http
import { HttpSubjectService } from './httpSubject.service';
import { CustomHttp } from './customHttp';

@NgModule({
    imports: [ ],
    providers: [
        HttpSubjectService,
        {
           provide: Http, useFactory: (backend: XHRBackend, defaultOptions: RequestOptions, httpSubjectService: HttpSubjectService) => {
                return new CustomHttp(backend, defaultOptions, httpSubjectService);
            },
            deps: [XHRBackend, RequestOptions, HttpSubjectService]
        }
    ]
})
export class CustomHttpCoreModule {

    constructor() { }
}

এখন আমাদের এইচটিটিপি সাবজেক্ট সার্ভিস বাস্তবায়ন দরকার যেখানে আমরা যখন "পরবর্তী" বিবৃতিতে ডাকা হয় তখন আমাদের আরএক্সজেএস সাবজেক্ট সাবস্ক্রাইব করতে পারি।

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

@Injectable()
export class HttpSubjectService {
    //https://github.com/ReactiveX/rxjs/blob/master/doc/subject.md
    //In our app.component.ts class we will subscribe to this Subjects
    public notificationSubject = new Subject();
    public http403Subject = new Subject();
    public http500Subject = new Subject();
    public overlaySubject = new Subject();
    public spinnerSubject = new Subject();

    constructor() { }

    //some Example methods we call in our CustomHttp Class
    public addNotification(resultJson: any): void {
        this.notificationSubject.next(resultJson);
    }

    public addHttp403(result: any): void {
        this.http403Subject.next(result);
    }

    public addHttp500(result: any): void {
        this.http500Subject.next(result);
    }

    public removeOverlay(): void {
        this.overlaySubject.next(0);
    }

    public addSpinner(): void {
        this.spinnerSubject.next(1);
    }

    public removeSpinner(): void {
        this.spinnerSubject.next(-1);
    }
}

আপনার কাস্টম বাস্তবায়নগুলিকে কল করতে আমাদের যেমন সাবধানতার সাথে সাবস্ক্রাইব করতে হবে "app.componal.ts"।

import { Component } from '@angular/core';
import { HttpSubjectService } from "../HttpInterception/httpSubject.service";
import { Homeservice } from "../HttpServices/home.service";

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
})
export class AppComponent {
    private locals: AppLocalsModel = new AppLocalsModel();

    constructor(private httpSubjectService : HttpSubjectService, private homeService : Homeservice) {}

    ngOnInit(): void {
        this.notifications();
        this.httpRedirects();
        this.spinner();
        this.overlay();
    }

    public loadServiceData(): void {
        this.homeService.getCurrentUsername()
            .subscribe(result => {
                this.locals.username = result;
            });
    }

    private overlay(): void {
        this.httpSubjectService.overlaySubject.subscribe({
            next: () => {
              console.log("Call Overlay Service");
            }
        });
    }

    private spinner(): void {
        this.httpSubjectService.spinnerSubject.subscribe({
            next: (value: number) => {
              console.log("Call Spinner Service");
            }
        });
    }

    private notifications(): void {
        this.httpSubjectService.notificationSubject.subscribe({
            next: (json: any) => {
                console.log("Call Notification Service");
            }
        });
    }

    private httpRedirects(): void {
        this.httpSubjectService.http500Subject.subscribe({
            next: (error: any) => {
                console.log("Navigate to Error Page");
            }
        });

        this.httpSubjectService.http403Subject.subscribe({
            next: (error: any) => {
                console.log("Navigate to Not Authorized Page");
            }
        });
    }
}


class AppLocalsModel {
    public username : string = "noch nicht abgefragt";
}

অলস অলগ্যান্স 4.3 আপনি ইন্টারসিপেক্টর ব্যবহার করতে পারেন

কৌণিক 4.3 এ আপনার নেটিভ ইন্টারসেপ্টর রয়েছে যেখানে আপনি সার্ভার ত্রুটি 500 এর জন্য পুনর্নির্দেশের মতো আপনার নিজের স্টাফ বাস্তবায়ন করতে পারেন

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class SxpHttp500Interceptor implements HttpInterceptor {

  constructor(public router: Router) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      return next.handle(req).do(evt => { }).catch(err => {
          if (err["status"]) {
              if (err.status === 500) {
                  this.router.navigate(['/serverError', { fehler: JSON.stringify(err) }]);
              }
          }
          return Observable.throw(err);
      });
  }
}

সরবরাহকারী অ্যারেতে আপনাকে এটি আপনার মূল মডিউলে নিবন্ধন করতে হবে

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { Router } from '@angular/router';
import { SxpHttp500Interceptor } from "./sxpHttp500.interceptor";
 ....

providers: [
    {
        provide: HTTP_INTERCEPTORS, useFactory: (router: Router) => { return new SxpHttp500Interceptor(router) },
        multi: true,
        deps: [Router]
    }
]

হালনাগাদ

কৌণিক ৪.৩.০ এ প্রবর্তিত নতুন HttpClient মডিউলটি ইন্টারসেপ্টরগুলিকে সমর্থন করে https://github.com/angular/angular/compare/4.3.0-rc.0...4.3.0

কীর্তি (সাধারণ): নতুন এইচটিটিপিপ্লিনেন্ট এপিটি এইচটিপিপি্লিয়েন্ট হ'ল বিদ্যমান কৌণিক এইচটিটিপি এপিআইয়ের একটি বিবর্তন, যা এর পাশাপাশি একটি পৃথক প্যাকেজ, @ কৌণিক / সাধারণ / HTTP- তে বিদ্যমান। এই কাঠামোটি নিশ্চিত করে যে বিদ্যমান কোডবাসগুলি আস্তে আস্তে নতুন এপিআইতে স্থানান্তর করতে পারে।

লিগ্যাসি এপিআই এর এরগনমিক্স এবং বৈশিষ্ট্যগুলিতে নতুন এপিআই উল্লেখযোগ্যভাবে উন্নতি করেছে। নতুন বৈশিষ্ট্যগুলির একটি আংশিক তালিকা অন্তর্ভুক্ত:

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

মূল

Angular2 এর (এখনও) ইন্টারসেপ্টর নেই। পরিবর্তে আপনি XHRBackend , XHRBackend , BaseRequestOptions বা অন্য কোনও জড়িত শ্রেণীর (কমপক্ষে টাইপস্ক্রিপ্ট এবং ডার্টে (সাধারণ জেএস সম্পর্কে জানেন না) প্রসারিত করতে পারেন।

আরো দেখুন





angular