九、HttpClient库在Angular中，HttpClient是用于在应用中执行HTTP请求的服务。它是@angul

在Angular中，HttpClient是用于在应用中执行HTTP请求的服务。它是@angular/common/http模块的一部分，并提供了一种简洁易用的方法来与RESTful服务进行通信。以下是如何在Angular项目中使用HttpClient的步骤。

一、使用内置的HttpClient

1. 导入HttpClient模块

首先，在你的Angular应用模块（通常是app.module.ts）中导入HttpClientModule。

复制

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule // 导入HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 在服务中使用HttpClient

接着，创建一个服务，在该服务中使用HttpClient来执行HTTP请求。使用Angular CLI可以通过以下命令快速生成服务：

ng generate service user

然后在生成的服务中注入HttpClient并使用它

import { Injectable } from '@angular/core';
import { User } from './user'
@Injectable()
export class UserListService {
    users: User[] = [{
        name: 'zhansan', age: 10
    },
    {
        name: 'zhansan', age: 10
    },
    {
        name: 'zhansan', age: 10
    }]
    constructor() { }
//    返回数据
/**
 * 获取用户列表的方法
 * @returns 返回User类型的数组，包含所有用户信息
 */
getUsers():User[]{
    return this.users; // 返回存储在this中的users数组
}
}

3. 在组件中使用服务

最后，在组件中使用这个服务。在组件中注入这个服务，并调用其方法。

import { Component, OnInit } from '@angular/core';
import {UserListService} from '../service/user.service';
import { User } from '../service/user'
import {HttpClient} from '@angular/common/http';
@Component({
  selector: 'app-hello-service',
  templateUrl: './hello-service.component.html',
  styleUrls: ['./hello-service.component.less'],
  providers: [UserListService]
})
export class HelloServiceComponent implements OnInit {
  users:User[] = [];
  constructor(private http: HttpClient) {
  
   }

  ngOnInit(): void {
    const url = 'http://localhost:3000/users'
    this.http.get(url).subscribe((data: User[]) => {
      this.users = data;
    })
  }

}

二、获取完整的响应

        this.users = data.body as User[];
      })

三、处理错误

   this.http.get(url).subscribe((data: User[]) => {
      this.users = data;
    },error=>{
      console.log('出错了')
    })

四、重试 retry

import { catchError, retry } from 'rxjs/operators';
    this.http.get(url).pipe(retry(3),catchError(function(err):any{
      console.log('出错了')
    })).subscribe((data: User[]) => {
      this.users = data;
    })

五、请求非JSON

    this.http.get(url, {responseType:'text'}).subscribe( data=>{
      
      })

九、HttpClient库