javascript - Angular 4 için her http isteği için bir yükleme gif'i göster

Angular ile oldukça yeniyim, bu yüzden ihtiyacım olan şey, her bir HTTP isteği yapıldığında bir spinner göstermek.

Birçok bileşenim var:

<component-one></component-one>
<component-two></component-two>
<component-three></component-three>
<component-n></component-n>

Her birinin bazı verileri almak veya kaydetmek için bir http isteği var, bu yüzden http isteği yapıldığında <loading></loading> bileşenimi göstermek istiyorum. Bu yüzden her bir http isteği olan bileşene yükleme bileşenimi eklemenin iyi bir uygulama olmadığını düşünüyorum. Angular'dan, http isteği olan her bileşende <loading> bileşenini otomatik olarak yüklememe olanak sağlayacak bir filtre veya benzeri bir şey ekleyebilir miyim?

Ayrıca HTTP isteği tamamlandığında "Tamamlandı" gibi bir mesaj göstermek istiyorum.

Eğer biri bu konuda bana bir çözüm sağlayabilirse gerçekten çok memnun olurum, teşekkürler.

Cevap #1

GÜNCELLEME: plunker. app.ts'ye bir bakın. Her şeyi tek bir dosyada bulundurduğum için özür dilerim.

Angular 4.3'te interceptorleri destekleyen yeni bir HttpClientModule var. Temel fikir, bunun gibi bir şeye sahip olmaktır:

@Injectable()
export class LoadingIndicatorService {

    private _loading: boolean = false;

    get loading(): boolean {
        return this._loading;
    }

    onRequestStarted(): void {
        this._loading = true;
    }

    onRequestFinished(): void {
        this._loading = false;
    }
}

Ve sonra Christopher'ın cevabındaki mantığı HttpInterceptor'ınıza uygularsınız.

Dikkat etmeniz gereken tek şey eşzamanlı taleplerdir. Bu, örneğin her talebe benzersiz bir kimlik oluşturarak ve talep bitene kadar bir yere saklayarak çözülebilir.

O zaman LoadingIndicatorService'i enjekte eden global bir LoadingIndicator bileşenin olabilir.

HttpClientModule hakkında daha fazla bilgi için: https://medium.com/codingthesmartway-com-blog/angular-4-3-httpclient-accessing-rest-web-services-with-angular-2305b8fd654b

Cevap #2

Bir http isteği, abone olunabilecek bir Observable döner.

Örneğin, bir kullanıcının kimlik doğrulamasını ele alalım.

Hizmetimde:

login(email: string, password: string): Observable<User> {
    let url = this.authUrl + '/login';

    return this.http
        .post(url, JSON.stringify({ email, password }))
        .map(res => res.json());
}

Bu yöntemi bileşenimde çağırıyor ve abone oluyorum:

 this.isLoading = true;
 this.authService.login(email, password)
        .subscribe(data => {
            this.isLoading = false;
            // Do whatever you want once the user is logged in
            // Where 'data' is the User returned by our http request
         }, error => {
            // Handle errors here
         }

Kullanıcımızın giriş yapmasını denemeden önce true olarak ayarlanan ve kimlik doğrulama başarılı olduğunda false olarak ayarlanan isLoading boolean değerine dikkat edin.

Bu, bu boolean ile yükleme animasyonunuzu gösterebileceğiniz ve gizleyebileceğiniz anlamına gelir, şöyle:

<loading-component *ngIf="isLoading"></loading-component>

İlgili makaleler