Angular HTTP PUT

简介

在Angular中，我们可以使用HttpClient进行HTTP请求。PUT请求是用于更新服务器上的现有资源。在这篇文章中，我们将探讨如何使用Angular中的HttpClient来发送PUT请求。

HTTP PUT请求

PUT请求用于更新服务器上现有的资源。PUT请求需要指定要更新的资源的唯一标识符，以及要更新的新数据。

以下是一个使用PUT请求更新数据的RESTful API端点的示例：

PUT /api/users/1
{
  "name": "John",
  "email": "john@example.com"
}

上面的示例中，我们使用PUT请求更新了ID为1的用户。 新数据包括name和email值。服务器返回更新后的用户信息。

我们将在下面介绍如何使用Angular的HttpClient来发送PUT请求。

HttpClient PUT请求

我们可以使用Angular的HttpClient来发送PUT请求。下面是一个使用HttpClient发送PUT请求的示例：

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs';

export class UserService {
  private url = '/api/users';

  constructor(private http: HttpClient) { }

  updateUser(user: any): Observable<any> {
    const headers = new HttpHeaders().set('Content-Type', 'application/json');
    return this.http.put<any>(`${this.url}/${user.id}`, user, { headers });
  }
}

上面的代码示例中，我们在UserService中创建了一个更新用户的方法。 使用HttpClient发送PUT请求。 我们将要更新的用户对象作为参数传递给更新用户方法。 我们设置Content-Type标题为application/json。

在updateUser方法中，我们使用HttpClient的put（）方法发送PUT请求。 我们使用${this.url}/${user.id} URL指向要更新的用户。 我们将要更新的新数据作为主体（user对象）传递给请求。

使用HttpClient发送PUT请求

要使用HttpClient发送PUT请求，请按照以下步骤操作：

1.导入HttpClient和HttpHeaders类：

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

2.创建HttpClient实例：

constructor(private http: HttpClient) { }

3.使用put（）方法发送PUT请求：

return this.http.put<any>(`${this.url}/${user.id}`, user, { headers });

在上面的代码中：

• 第一个参数是PUT请求的URL，使用${this.url}/${user.id}指定资源的URL。
• 用户数据作为第二个参数传递给请求。
• 第三个参数是一个可选参数，用于指定请求头。 我们在此处设置请求头以指定内容类型。

示例

在以下示例中，我们将更新以前的用户数据。

app.component.ts：

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  users: any;
  errorMessage = '';

  constructor(private userService: UserService) { }

  ngOnInit() {
    this.userService.getUsers()
      .subscribe(
        users => this.users = users,
        error => this.errorMessage = error
      );
  }

  updateUser(user: any) {
    user.name = 'John Doe';
    this.userService.updateUser(user)
      .subscribe(
        () => console.log('User updated successfully'),
        error => console.error(error)
      );
  }
}

在上面的代码中，我们调用UserService的getUsers（）方法来获取用户列表。 我们将更新每个用户的名称。 然后，我们调用UserService的updateUser（）方法来更新用户。

user.service.ts：

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private url = 'https://jsonplaceholder.typicode.com/users';

  constructor(private http: HttpClient) { }

  getUsers(): Observable<any[]> {
    return this.http.get<any[]>(this.url);
  }

  updateUser(user: any): Observable<any> {
    const headers = new HttpHeaders().set('Content-Type', 'application/json');
    return this.http.put<any>(`${this.url}/${user.id}`, user, { headers });
  }
}

在上面的代码中，我们创建了一个UserService类，使用HttpClient发送GET和PUT请求。

结论

在本文中，我们介绍了PUT请求以及如何使用Angular中的HttpClient来发送PUT请求。 我们展示了一个实例，演示了如何更新现有的用户数据。