启用 Http 服务

  • open the root AppModule,
  • import the HttpClientModule symbol from @angular/common/http,
  • add it to the @NgModule.imports array.
  1. // app.module.ts:
  3. import {NgModule} from '@angular/core';
  4. import {BrowserModule} from '@angular/platform-browser';
  6. // Import HttpClientModule from @angular/common/http
  7. import {HttpClientModule} from '@angular/common/http';
  9. @NgModule({
  10.   imports: [
  11.     BrowserModule,
  12.     // Include it under 'imports' in your application module
  13.     // after BrowserModule.
  14.     HttpClientModule,
  15.   ],
  16. })
  17. export class MyAppModule {}

发起一个 get 请求

  1. @Component(...)
  2. export class MyComponent implements OnInit {
  4.   results: string[];
  6.   // Inject HttpClient into your component or service.
  7.   constructor(private http: HttpClient) {}
  9.   ngOnInit(): void {
  10.     // Make the HTTP request:
  11.     this.http.get('/api/items').subscribe(data => {
  12.       // Read the result field from the JSON response.
  13.       this.results = data['results'];
  14.     });
  15.   }
  16. }

Reading the full response

  1. this.http
  2.   .get('https://jsonplaceholder.typicode.com/posts/1', {observe: 'response'})
  3.   .subscribe(res => {
  4.   console.log(res)
  5. })

结果示例：

错误处理

  1. http
  2.   .get('/api/items')
  3.   .subscribe(
  4.     // Successful responses call the first callback.
  5.     data => {...},
  6.     // Errors will call this callback instead:
  7.     err => {
  8.       console.log('Something went wrong!');    
  9.     }
  10.   );