如何为Angular HttpClient设置baseUrl？

Question

我在documentation中找不到方法来为所有http请求设置基本API url。是否可以使用Angular HttpClient？

Answer 1

我认为没有默认的方法来做到这一点。做HttpService并在里面你可以定义你的默认URL的属性，并使方法可以用你的属性URL调用http.get和其他方法。然后注入HttpService而不是HttpClient

Answer 2

使用新的HttpClient拦截器。

创建实现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可以克隆该请求，并改变它，你想，在这种情况下，我定义的默认路径为所有的HTTP请求。

提供以下配置HttpClientModule：

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

现在，所有的请求都将与your-api-url/

Answer 3

开始你并不一定需要一个基本URL与HttpClient的中， docs说你只需要指定请求的api部分，如果你打电话给同一台服务器，就像这样简单：

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

但是，如果您需要或想要指定基本URL，则可以。

我有这样做2点建议：

。具有静态类属性的助手类。

export class HttpClientHelper{ 

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


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

。一类属性的基类，所以任何新的业务应该扩展它：

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`); 
    } 

}