为 Angular 5 使用 HTTP 客户端

Question

我关注这里是为了学习如何使用 Http 客户端。

https://codecraft.tv/courses/angular/http/core-http-api/

里面有参考使用URLSearchParams

但是 - 从我在另一个 post 中看到的内容来看 URLSearchParams 已经被贬低了。

截至目前，我使用的服务需要 HTTP 访问。为了导入 HTTP 功能，我有以下内容。

// import { HttpModule } from '@angular/http';
// import { HttpErrorResponse } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import { Http, Response, RequestOptions, Headers, HttpModule} from '@angular/http';

使用 Angular5 的 HTTP 功能的最佳方式是什么？

TIA

更新

我尝试了以下但出现错误：

core.js:1427 ERROR Error: Uncaught (in promise): Error: StaticInjectorError[HttpClient]: 
  StaticInjectorError[HttpClient]:

TIA

[... snip ...]

import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/shareReplay';


// import { HttpModule } from '@angular/http';
// import { HttpErrorResponse } from '@angular/common/http';
// import { HttpClientModule } from '@angular/common/http';

// import { Http, Response, RequestOptions, Headers, HttpModule} from '@angular/http';

// import { HttpClient, HttpParams  } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    NotFoundComponent
  ],
  imports: [
    // HttpModule,
    // HttpClientModule,
    // HttpClient,
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    routing
  ],
  providers: [ AppSettings, AdminServicesService ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

admin.services.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { User } from 'app/pages/auth-admin/admin-model/user';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { workers } from 'cluster';

// OLD: => import { HttpClient } from '@angular/common/http/src/client';
// import { HttpClient } from '@angular/common/http';

import { HttpClient, HttpParams } from '@angular/common/http';

[... snip ...]

我得到以下错误

core.js:1427 ERROR Error: Uncaught (in promise): Error: StaticInjectorError[HttpClient]: 
  StaticInjectorError[HttpClient]: 
    NullInjectorError: No provider for HttpClient!
Error: StaticInjectorError[HttpClient]: 
  StaticInjectorError[HttpClient]: 
    NullInjectorError: No provider for HttpClient!
    at _NullInjector.get (core.js:993)
    at resolveToken (core.js:1281)
    at tryResolveToken (core.js:1223)
    at StaticInjector.get (core.js:1094)
    at resolveToken (core.js:1281)
    at tryResolveToken (core.js:1223)
    at StaticInjector.get (core.js:1094)
    at resolveNgModuleDep (core.js:10878)
    at _createClass (core.js:10915)
    at _createProviderInstance (core.js:10889)
    at _NullInjector.get (core.js:993)
    at resolveToken (core.js:1281)
    at tryResolveToken (core.js:1223)
    at StaticInjector.get (core.js:1094)
    at resolveToken (core.js:1281)
    at tryResolveToken (core.js:1223)
    at StaticInjector.get (core.js:1094)
    at resolveNgModuleDep (core.js:10878)
    at _createClass (core.js:10915)
    at _createProviderInstance (core.js:10889)
    at resolvePromise (zone.js:824)
    at resolvePromise (zone.js:795)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.js:4744)
    at ZoneDelegate.invokeTask (zone.js:424)

Answer 1

在 Angular v4.3+ 中，您应该使用新的 HttpClient，您应该像这样从 @angular/common/http 导入它：

import { HttpClient } from '@angular/common/http';.

对于 URLSearchParams 你应该使用 HttpParams，你也应该像这样从 @angular/common/http 导入它：

import { HttpClient, HttpParams } from '@angular/common/http';.

这是一个简单的 GET 请求示例，其中包含新的 HttpClient:

  getSomething(url: string): Observable<any> {
    return this.http
      .get<any>(url, { headers: yourHeaders })
      .catch((e) => this.yourHandleErrorFunction(e));
  }

这里有一个 HttpParams 的例子：

  getAttachment(url: string, attachmentId: number, width: number = 0, height: number = 0): Observable<File> {
    let httpParams = new HttpParams();
    httpParams = httpParams.set('height', height.toString());
    httpParams = httpParams.set('width', width.toString());
    return this.http
      .get<File>(url, { headers: yourHeaders, params: httpParams, responseType: 'blob' as 'json' })
      .catch((e) => this.yourHandleError(e));
  }

阅读官方 angular documentation for HttpClient.

为 Angular 5 使用 HTTP 客户端

using HTTP client for Angular 5

rest

http

angular-http

angular