angular - Hvordan kan jeg dele data fra HTTP-respons mellom komponenter?

Jeg utvikler en app som skal lage HTTP-forespørsler til en tredje API. Når jeg gjennomfører autentiseringsprosessen, gir API-en meg en nøkkel (den kalles clientid) som jeg må sende med andre data til fremtidige HTTP-forespørsler.

Så saken er at etter autentisering til API-et, når jeg vil gjøre en annen forespørsel, må jeg sende clientid som jeg fikk fra autentiseringssvaret.

Jeg leste om foreldre-barn-forhold (@input-@output), men jeg tror ikke det hjelper, fordi appen vil gjøre forskjellige forespørsler fra forskjellige komponenter som kanskje ikke har noen relasjon mellom seg.

Min idé er at når jeg er ferdig med autentiseringsprosessen fra de respektive tjenestene, må jeg lagre dette feltet et sted for å være tilgjengelig når jeg vil gjøre andre forespørsler fra hvilken som helst komponent jeg trenger.

Jeg tror at jeg trenger noe som en singleton-tilnærming, men jeg er ikke sikker på om tanken er riktig.

Svar #1

Du vil ønske å ha en tjeneste som gjør forespørselen og lagrer dataene. Her er et eksempel på en enkel tjeneste som gjør en HTTP-forespørsel for noen data som er en liste med strenger.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of, tap } from 'rxjs';

Injectable({
    providedIn: 'root'
})
export class MyExampleService {
    private myData: string[] = [];

    constructor(private readonly http: HttpClient) { }

    getData$(): Observable<string[]> {
        //if we already got the data, just return that
        if (this.myData.length > 0) {
            return of(this.myData);
        }

        //if not, get the data
        return this.http.get<string[]>('http://my-api.com/get-stuff')
            .pipe(tap((returnedData: string[]) => {
                //save the returned data so we can re-use it later without making more HTTP calls
                this.myData = returnedData;
            }));
    }
}

da kan de i dine Angular-komponenter begge be om data på nøyaktig samme måte, men bare den som gjør det først vil faktisk utføre HTTP-forespørselen, de andre vil bare få de allerede bufrede dataene.

import { Component, OnInit } from '@angular/core';
import { MyExampleService } from '../services/my-example.service';

@Component({
    selector: 'app-my-example',
    templateUrl: './my-example.component.html'
})
export class MyExampleComponent implements OnInit {
    theData: string[] = [];

    constructor(private readonly myExampleService: MyExampleService) {}

    ngOnInit(): void {
        //call the service
        this.myExampleService.getData$()
            .subscribe((data: string[]) => {
              //when sucessful, data is returned here and you can do whatever with it
              this.theData = data;
            }, (err: Error) => {
                //When unsuccessful, this will run
                console.error('Something broke!', err);
            });
    }
}

Relaterte artikler