g u t x .com.tr İpek yolu - Çin'i anlamaya götürürüm

Angular yazılımında API isteklerini yürütmenin doğru yolu hakkında bilgi edinin

Tam metin 5358 kelime ve beklenen öğrenme süresi 16 dakikadır

Kaynak: Pexels

Bu makale, Angular uygulamasında isteklerin nasıl yürütüleceğini tartışacaktır.

1. İstekleri süslemek için durdurucuları kullanın

2. HttpClient ve HttpBackend Karşılaştırması

3. Diğer yöntemler

Bu makale, benim yıllara dayanan ön uç iş deneyimime (4 yıllık Angular iş deneyimi) dayanmaktadır. Herhangi bir hata varsa, lütfen beni aydınlatmaktan çekinmeyin.

İstekleri süslemek için yakalayıcıları kullanın

API'lerle (uygulama programlama arayüzleri) çalışırken, HTTP engelleyicileri önemli bir özelliktir. Engelleme ile, HTTP isteğini incelemek ve onu uygulamadan sunucuya göndermek ve yanıtı sunucudan uygulamaya geri dönüştürmek için bir engelleyici kullanırsınız.

basit ifadeyle:

Gerçek işlemde, kullanıcı oturum açtıktan sonra, arka uca iletilen her API'nin, kullanıcının kimliğini ve yetkilendirmesini doğrulamak için başlığa yetkilendirme eklemesi gerekir.

Örnek 1: İsteğe JWT eklemek için bir durdurucu kullanın

@ Enjekte edilebilir () exportclass RequestInterceptorService, HttpInterceptor { yapıcı (özel mağaza: Mağaza) {} tutmak( istek: HttpRequest < hiç > , sonraki: HttpHandler ): Gözlemlenebilir < hiç > { const userInfo = this.store.selectSnapshot < Kullanıcı > (durum = > state.AppState.user); const authReq = request.clone ({ üstbilgiler: yeni HttpHeaders ({ 'İçerik Türü': 'uygulama / json', 'Yetkilendirme': `Taşıyıcı $ {userInfo.token} ' }) }); return next.handle (authReq); } }

İsteğe jwt eklemek için bir durdurucu kullanın

Örnek 2: Uygulamada çarkı kontrol etmek için durdurucuyu kullanın

@ Enjekte edilebilir ({ providedIn: 'root' }) exportclass LoadingInterceptorService { activeRequests: sayı = 0; yapıcı ( private loadingScreenService: LoadingService ) {} kesme (istek: HttpRequest < hiç > , sonraki: HttpHandler): Gözlemlenebilir < HttpEvent < hiç > > { eğer (this.activeRequests === 0) { this.loadingScreenService.startLoading (); } this.activeRequests ++; return next.handle (istek) .pipe ( sonuçlandır (() = > { this.activeRequests--; eğer (this.activeRequests === 0) { this.loadingScreenService.stopLoading (); } }) ) }; }

Uygulamadaki iplikçileri kontrol etmek için önleyiciler kullanın

Örnek 3: İstekleri önbelleğe almak için yakalayıcıları kullanın

@ Enjekte edilebilir () exportclass CachingInterceptor, HttpInterceptor { yapıcı (özel önbellek: RequestCache) {} kesme (req: HttpRequest < hiç > , sonraki: HttpHandler) { // önbelleğe alınabilir değilse devam edin. eğer (! isCachable (req)) {return next.handle (req);} const cachedResponse = this.cache.get (req); return cachedResponse? of (cachedResponse): sendRequest (req, next, this.cache); } }

İstekleri önbelleğe almak için yakalayıcıları kullanın

Ayrıca istekle ilgili daha fazla şey yapabilirsiniz:

· API hatası durumunda modeli göster.

· Yanıt verdikten sonra, durum koduna göre daha fazla işlem kuralı ekleyin

· URL isteğinin veya istek gövdesinin üzerine yaz

Önleyen, tüm isteklerinizi etkileyecektir. Peki, Angular'da istek nasıl özelleştirilir ve durdurucu nasıl devre dışı bırakılır? Hadi bir bakalım

HttpClient ve HttpBackend Karşılaştırması

Birçok geliştiricinin, arka uca istek göndermeleri gerektiğinde Angular projelerinde yalnızca HttpClient kullandığını gözlemledim. Ve bu yanlış.

neden?

Kaynak: Pexels

Çünkü HttpClient tarafından gönderilen taleplerimiz her zaman Angular'ın önleyicisinden geçer. Bu sorunu çözmek için bazı geliştiriciler, "hile kodu" olarak adlandırdığım engelleyiciyi devre dışı bırakmak için daha fazla kod yazarlar. Bazı geliştiriciler, istekleri işlemek ve her isteğe başlık eklemek için engelleyicileri kullanmaz.

Bu, kodu kod kokusu ve teknik borçla dolu hale getirir. Geliştiriciler, daha fazla işi tamamlamak için yukarıdaki iki seçenekten birini kullanmalıdır.

Çözüm: İsteği göndermek için HttpClient ve HttpBackend'i kullanın.

Tek fark, HttpBackend'in isteği engelleyici zincirinden geçmeden doğrudan arka uca göndermesidir.

HttpService örneği:

{Enjekte edilebilir} 'i' @ angular / core'dan içe aktar; '@ angular / common / http'den {HttpHeaders, HttpClient, HttpParams, HttpBackend} içe aktarın; import {Observable, throwError, of} 'rxjs'den; 'rxjs / operatörlerden' {catchError} dosyasını içe aktarın; @ Enjekte edilebilir ({ providedIn: 'root' }) exportclass HttpService { privatehttpWithoutInterceptor: HttpClient; yapıcı ( özel http: HttpClient, özel httpBackend: HttpBackend ) { this.httpWithoutInterceptor = new HttpClient (httpBackend); } privateformatErrors (hata: herhangi) { returnthrowError (hata.error); } get (yol: string, parametreler: HttpParams = new HttpParams ()): Gözlemlenebilir < hiç > { this.http.get (`$ {yol}`, {params}) döndür .pipe (catchError (this.formatErrors)); } put (yol: string, body: Object = {}): Gözlenebilir < hiç > { this.http.put ( `$ {yol}`, JSON.stringify (body) ) .pipe (catchError (this.formatErrors)); } post (yol: string, body: Object = {}, seçenekler: Object = {}): Gözlenebilir < hiç > { this.http.post ( `$ {yol}`, JSON.stringify (gövde), seçenekler ) .pipe (catchError (this.formatErrors)); } delete (yol): Gözlemlenebilir < hiç > { return this.http.delete ( $ {yol} ) .pipe (catchError (this.formatErrors)); } _get (yol: string, parametreler: HttpParams = new HttpParams ()): Gözlemlenebilir < hiç > { return this.httpWithoutInterceptor.get (`$ {yol}`, {params}) .pipe (catchError (this.formatErrors)); } _put (yol: string, body: Object = {}): Gözlenebilir < hiç > { return this.httpWithoutInterceptor.put ( `$ {yol}`, JSON.stringify (body) ) .pipe (catchError (this.formatErrors)); } _post (yol: string, body: Object = {}, seçenekler: Object = {}): Gözlemlenebilir < hiç > { this.httpWithoutInterceptor.post ( `$ {yol}`, JSON.stringify (gövde), seçenekler ) .pipe (catchError (this.formatErrors)); } _delete (yol): Gözlemlenebilir < hiç > { return this.httpWithoutInterceptor.delete ( $ {yol} ) .pipe (catchError (this.formatErrors)); } }

by GitHub tarafından barındırılan rawhttp.service.ts'i görüntüleyin

Httpclient ve httpbackend kullanan Httpservice örneği

Önleyiciden hangi yoldan geçeceğinize ve hangi yoldan geçmeyeceğinize siz karar vereceksiniz.

Farklı başlıklar gerektiren veya başka bilgiler ekleyen bazı belirli API'ler (uygulama programı arabirimleri) için, bunları manuel olarak özelleştirmek için HttpBackend'i kullanabilirsiniz.

diğer yöntemler. Diğer metodlar

Bunu başlık olarak kullanıyorum çünkü aşağıdakiler karşılaşmış olabileceğiniz veya karşılaşmayabileceğiniz bazı küçük kullanım durumları.

Başarısızlıktan sonra API nasıl çağrılır?

getConfig () { iade this.http.get < Yapılandırma > (this.configUrl) .boru( yeniden dene (3), // başarısız bir isteği en fazla 3 kez yeniden dene ); }

Başarısız istekleri en çok üç kez yeniden deneyin

İstek başarısız olursa, isteği deneme süresini uzatmak için retry () (istisna yeniden deneme) kullanın.

Hatalar nasıl yakalanır?

Önleyicinin hatasını yakalamak için next () işlevinin kullanılması önerilir.

@ Enjekte edilebilir () exportclass ErrorInterceptorService, HttpInterceptor { yapıcı () {} tutmak( istek: HttpRequest < hiç > , sonraki: HttpHandler ): Gözlemlenebilir < hiç > { return next.handle (istek) .pipe ( catchError (this.handleError) ); } privatehandleError (hata: HttpErrorResponse) { if (error.errorinstanceof ErrorEvent) { console.error ('Bir hata oluştu:', error.error.message); } Başka { console.error ( `Arka uç $ {error.status} kodunu döndürdü,` + `body was: $ {error.error}`); } returnthrowError ( 'Kötü bir şey oldu; lütfen daha sonra tekrar deneyin.'); }; }

XSRF saldırılarından nasıl kaçınılır?

Bir HTTP isteği gerçekleştirirken, engelleyici belirteci tanımlama bilgisinden okur, varsayılan değer XSRF-TOKEN'dir ve bunu HTTP başlığı, X-XSRF-TOKEN olarak ayarlar. Yalnızca etki alanınızda çalışan kod tanımlama bilgisini okuyabildiğinden, arka uç HTTP isteğinin saldırgandan değil istemci uygulamanızdan geldiğini belirleyebilir.

Arka uç hizmeti XSRF belirteç tanımlama bilgisi veya başlığı için farklı bir ad kullanıyorsa, bunu geçersiz kılmak için HttpClientXsrfModule.withOptions () öğesini kullanın.

ithalat: ,

XSRF belirtecini geçersiz kılmak için HttpClientXsrfModule kullanın