Разница между HTTP и HTTPClient в angular 4?

Question

Разница между HTTP и HTTPClient в angular 4?

Я хочу знать, какой из них использовать для создания макета веб-службы для тестирования угловой программы?

689 3

angular http httpclient

3 ответов:

Comments

Ничего не найдено.

Max Wizard K · Accepted Answer · 2018-01-09 18:02:58

использовать HttpClient класс HttpClientModule если вы используете угловые 4.3.X и выше:
import { HttpClientModule } from '@angular/common/http';

@NgModule({
 imports: [
   BrowserModule,
   HttpClientModule
 ],
 ...

 class MyService() {
    constructor(http: HttpClient) {...}
это обновленная версия http С @angular/http модуль со следующими улучшениями:

перехватчики позволяют вставлять логику промежуточного программного обеспечения в конвейер

неизменяемые объекты запроса / ответа

события прогресса как для загрузки запроса, так и для загрузки ответа

вы можете прочитать о том, как он работает в руководство инсайдера по перехватчикам и механике HttpClient в Angular.

типизированный синхронный доступ к телу ответа, включая поддержку типов тел JSON

JSON является предполагаемым значением по умолчанию и больше не нуждается в явном анализе

POST-запрос по проверке базы на основе и заподлицо тестирования

идти вперед старый http-клиент будет устаревшим. Вот ссылки на фиксация и официальные документы.

Также обратите внимание, что старый http был введен с помощью Http маркер класса вместо нового HttpClient:
import { HttpModule } from '@angular/http';

@NgModule({
 imports: [
   BrowserModule,
   HttpModule
 ],
 ...

 class MyService() {
    constructor(http: Http) {...}
и HttpClient требуются tslib во время выполнения, так что вы должны установить его npm i tslib и обновления system.config.js если вы используете SystemJS:
map: {
     ...
    'tslib': 'npm:tslib/tslib.js',
и нужно добавить еще одно отображение, если вы используете SystemJS:
'@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.js',

skryvets · Accepted Answer · 2018-09-05 17:21:48

Не хочу повторяться, но просто резюмировать по-другому:

автоматическое преобразование из JSON в объект

определение типа ответа

события

упрощенный синтаксис для заголовков

- перехватчиков

Я написал статью, где я рассмотрел разницу между старым "http" и новым "HttpClient". Цель состояла в том, чтобы объяснить это как можно проще.

просто о новый HttpClient, который в угловые

abann sunny · Accepted Answer · 2018-05-04 03:30:48

это хорошая ссылка, это помогло мне переключить мои http-запросы на httpClient

https://blog.hackages.io/angular-http-httpclient-same-but-different-86a50bbcc450

Он сравнивает два с точки зрения различий и дает примеры кода.

это всего лишь несколько отличий, с которыми я имел дело при смене сервисов на httpclient в моем проекте (заимствование из статьи, которую я упомянул):

импорт
import {HttpModule} from '@angular/http';
import {HttpClientModule} from '@angular/common/http';
запрос и парсинг ответа

http
 this.http.get(url)
      // Extract the data in HTTP Response (parsing)
      .map((response: Response) => response.json() as GithubUser)
      .subscribe((data: GithubUser) => {
        // Display the result
        console.log('TJ user data', data);
      });
httpclient:
 this.http.get(url)
      .subscribe((data: GithubUser) => {
        // Data extraction from the HTTP response is already done
        // Display the result
        console.log('TJ user data', data);
      });
Примечание: Вы больше не должны данные явно, по умолчанию, если данные, которые вы получаете обратно JSON вам не нужно делать ничего лишнего, но если вам нужно проанализировать любой другой тип ответа, как текст или blob убедитесь, что вы добавляете responseType в запросе. вот так:

/ / сделать запрос GET HTTP с responseType вариант
 this.http.get(url, {responseType: 'blob'})
      .subscribe((data) => {
        // Data extraction from the HTTP response is already done
        // Display the result
        console.log('TJ user data', data);
      });
Я также использовал перехватчики для добавления маркера для моей авторизации к каждому запросу:

это хорошая ссылка: https://offering.решения / Блог / Статьи/2017/07/19/angular-2-new-http-interface-with-interceptors/

вот так:
@Injectable()
export class MyFirstInterceptor implements HttpInterceptor {

    constructor(private currentUserService: CurrentUserService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        // get the token from a service
        const token: string = this.currentUserService.token;

        // add it if we have one
        if (token) {
            req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) });
        }

        // if this is a login-request the header is 
        // already set to x/www/formurl/encoded. 
        // so if we already have a content-type, do not 
        // set it, but if we don't have one, set it to 
        // default --> json
        if (!req.headers.has('Content-Type')) {
            req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
        }

        // setting the accept header
        req = req.clone({ headers: req.headers.set('Accept', 'application/json') });
        return next.handle(req);
    }
}
его довольно хорошее обновление!