Jak ustawić baseUrl dla Angular HttpClient?

Question

Nie znalazłem sposobu w documentation, aby ustawić adres URL podstawowego interfejsu API dla wszystkich żądań http. Czy można to zrobić z Angular HttpClient?

Answer 1

Myślę, że nie ma domyślnego sposobu, aby to zrobić. Wykonaj HttpService, a wewnątrz możesz zdefiniować właściwość domyślnego adresu URL i utwórz metody wywoływania http.get i innych za pomocą adresu URL właściwości. Następnie wprowadź HttpService zamiast HttpClient

Answer 2

Użyj nowego HttpClient Interceptor.

Tworzenie właściwego wstrzykiwania, która implementuje HttpInterceptor:

import {Injectable} from '@angular/core'; 
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http'; 
import {Observable} from 'rxjs/Observable'; 

@Injectable() 
export class APIInterceptor implements HttpInterceptor { 
    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { 

    const apiReq = req.clone({ url: `your-api-url/${req.url}` }); 
    return next.handle(apiReq); 
    } 
} 

HttpInterceptor można sklonować żądanie i zmienić go jak chcesz, w tym przypadku zdefiniowany domyślną ścieżkę dla wszystkich żądań HTTP.

Podaj HttpClientModule z następujących konfiguracjach:

providers: [{ 
     provide: HTTP_INTERCEPTORS, 
     useClass: APIInterceptor, 
     multi: true, 
    } 
    ] 

Teraz wszystkie wasze prośby rozpocznie z your-api-url/

Answer 3

nie koniecznie URL bazową z HttpClient The Dokumenty mówią, że musisz tylko określić część API żądania, jeśli dzwonisz do tego samego serwera, jest to proste:

this.http.get('/api/items').subscribe(data => { ...

Możesz jednak, jeśli chcesz lub chcesz, podać podstawowy adres URL.

mam 2 propozycje to robić:

. Klasa pomocnicza ze statyczną właściwością klasy.

export class HttpClientHelper{ 

    static baseURL: string = 'http://localhost:8080/myApp'; 
} 


this.http.get(`${HttpClientHelper.baseURL}/api/items`);//in your service class 

. Klasy podstawowej z właściwości klasy więc każda nowa usługa powinna go przedłużyć:

export class BackendBaseService { 

    baseURL: string = 'http://localhost:8080/myApp'; 

    constructor(){} 

}

@Injectable() 
export class ItemsService extends BackendBaseService{ 

    constructor(private http: HttpClient){ 
    super(); 
    } 

    public listAll(): Observable<any>{  
    return this.http.get(`${this.baseURL}/api/items`); 
    } 

}