Как я могу переключиться на выборку вместо XHR при использовании Angular 6 с HttpClient - PullRequest
0 голосов
/ 23 сентября 2018

Я уже некоторое время изучаю угловые 4 и 6, и я делаю Сервисы, чтобы использовать в них HTTP-вызовы.что-то вроде этого:

@Injectable()
export class ApiService
{
    private apiUrl:string;
    constructor(
        private  httpClient:  HttpClient,
        private config: ConfigService,
        private cookieService: CookieService
    )
    {
        this.apiUrl = this.config.get("apiEndpoint");
    }
    private headers() :any
    {
        let headers = new HttpHeaders();
        headers = headers.set('Accept', 'application/json');
        headers = headers.set('Authorization', 'Bearer '+this.cookieService.get("token"));
        return headers;
    }
    public get(url): any
    {
        return this.httpClient.get(`${this.apiUrl}${url}`, this.headers());
    }
    public post(url, data = {}): any
    {
        return this.httpClient.post(`${this.apiUrl}${url}`, data, this.headers());
    }
    public put(url, data = {}): any
    {
        return this.httpClient.put(`${this.apiUrl}${url}`, data, this.headers());
    }
    public patch(url, data = {}): any
    {
        return this.httpClient.patch(`${this.apiUrl}${url}`, data, this.headers());
    }
    public delete(url, data = {}): any
    {
        return this.httpClient.delete(`${this.apiUrl}${url}`, this.headers());
    }
}

Который по умолчанию использует XHR, как я могу получить?

1 Ответ

0 голосов
/ 23 сентября 2018

Во-первых, нет причин делать это.То, что HttpClient использует под капотом, считается деталью реализации , и вас не должно волновать, использует ли он XHR или fetch под капотом.В настоящее время он использует XHR, но это может измениться в любое время, и вы даже не узнаете об этом.


Тем не менее, чтобы ответить на ваш вопрос: если вы действительно хотите использовать fetch в вашем коде проще всего просто ... использовать fetch?Ни в коем случае не используйте HttpClient.

public get(url): any
{
    return fetch(`${this.apiUrl}${url}`, this.headers());
}

Альтернативой является повторная реализация всего HttpClient (yikes!), А затем предоставление пользовательской fetch -подобной реализации (например, FetchHttpClient).).

providers: [
  { provide: HttpClient, useClass: FetchHttpClient }
]
...