为Angular 5使用HTTP客户端

时间:2018-02-08 14:18:53

标签: angular rest http angular-http

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

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

其中有一个使用 if let text = textField.text, let number = formatter.number(from: text) { atmosfera = number.doubleValue print(atmosfera) self.tableView.reloadData() } func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { }

的参考

但是 - 从我在另一篇文章URLSearchParams中看到的内容已被删除。

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

URLSearchParams

为Angular 5使用HTTP功能的最佳方法是什么?

TIA

更新

我尝试了以下但得到了错误:

// 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';

TIA

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

admin.services.ts

[... 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 { }

我收到以下错误

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 ...]

1 个答案:

答案 0 :(得分:2)

在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)); } 的示例:

HttpClient

阅读.byline { display: block; text-transform: uppercase; color: #9F9F9F; font-size: 0.7rem; padding: 0.5rem 1rem; margin: 1rem -0.75rem 1rem -1.25rem; background-color: rgba(0,0,0,0.09); letter-spacing: 1px; width: calc(100% + 2.5rem); text-shadow: 0 1px 1px #fff; } 的官方角度documentation