Service之CURD

Service的增加、更新、删除

在上一节新建Service中，我们熟悉了如何在Service中获取mock中的数据，并以Observable的形式返回。也学了在查询出错的时候，利用RxJS中catchError操作符捕获异常，并返回。

接下来，我们将继续学习Service的其他一些操作：增加、更新、删除。

1. 编写POST代码

  • service中添加代码如下：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
// hr-manager.service.ts

/**
 * 如果创建成功，则返回user数据
 *
 * 如果api的地址不存在，返回null
 *
 * 其他错误，抛出异常err
 *
 * @param user 需要增加的user数据
 */
public addUser(user: ContentHrmanagerEntity): Observable<ContentHrmanagerEntity> {
  return this.http.post(`${this.API}`, user).pipe(
    map(data => data as ContentHrmanagerEntity),
    catchError((err: HttpErrorResponse) => {
      if(err.status === 404) {
        return of(null);
      }
      return throwError(err);
    })
  );
}
  • form中添加代码如下：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// from.component.ts

/**
 * 添加
 */
add() {
  const id = this.id.nativeElement.value;
  const name = this.name.nativeElement.value;
  const age = this.age.nativeElement.value;

  const user = {
    'id': +id,
    'name': name,
    'age': +age
  };

  const user$ = this.hrManagerService.addUser(user);
  user$.subscribe(
    u => {
      if(u === null) {
        return;
      }
      console.log('id = ' + u.id + '  name = ' + u.name + '  age = ' + u.age
    )},
    err => {
      const errorResponse = (err as HttpErrorResponse);
      console.log(
        '   error   => ' + errorResponse.error,
        '\n message => ' + errorResponse.message);
    });
}

成功运行结果如下：

当继续点击“添加”，重复创建异常发生：

2. 编写PUT代码

  • service中添加代码如下：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
 * 如果更新成功，则返回user数据
 *
 * 如果api的地址不存在，返回null
 *
 * 其他错误，抛出异常err
 *
 * @param id 被更新的id
 *
 * @param user 被更新的user数据
 */
public updateUser(id: number, user: ContentHrmanagerEntity): Observable<ContentHrmanagerEntity> {
  return this.http.put(`${this.API}/${id}`, user).pipe(
    map(data => data as ContentHrmanagerEntity),
    catchError((err: HttpErrorResponse) => {
      if(err.status === 404) {
        return of(null);
      }
      return throwError(err);
    })
  );
}
  • form中添加代码如下：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
/**
 * 更新
 */
update() {
  const id = this.id.nativeElement.value;
  const name = this.name.nativeElement.value;
  const age = this.age.nativeElement.value;

  const user = {
    'id': +id,
    'name': name,
    'age': +age
  };

  const user$ = this.hrManagerService.updateUser(+id, user);
  user$.subscribe(
    u => {
      if(u === null) {
        return;
      }
      console.log('id = ' + u.id + '  name = ' + u.name + '  age = ' + u.age
    )},
    err => {
      const errorResponse = (err as HttpErrorResponse);
      console.log(
        '   error   => ' + errorResponse.error,
        '\n message => ' + errorResponse.message);
    });
}

  • 测试

  • 先查询出已在的数据，比如：我们先把ID为4的数据查询出来：

  • 更新名称，如：'小七'。当执行更新操作后，我们会发现该条记录被正确更新，并且更新的结果返回。

    这个时候，如果我们不作改变，继续点击‘更新’按钮，我们会发现，在控制台并没有发现有新的更新记录产生。

    这里会涉及"幂等性"在里面。幂等性：就是用户对于同一操作发起的一次请求或者多次请求的结果是一致的，不会因为多次点击而产生了副作用。

    PUT是幂等的操作，即重复操作不会产生变化，10次PUT 的创建请求与1次PUT 的创建请求相同，只会创建一个资源，其实后面9次的请求只是对已创建资源的更新，且更新内容与原内容相同，所以不会产生变化。

    POST 的重复操作截然不同，10次POST请求将会创建10个资源。

3. 编写PATCH代码

  • service中添加代码如下：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
/**
 * 如果更新成功，则返回user数据
 *
 * 如果api的地址不存在，返回null
 *
 * 其他错误，抛出异常err
 *
 * @param id 被更新的id
 *
 * @param user 被更新的user部分字段
 */
public updateSomeUser(id: number, user: any): Observable<ContentHrmanagerEntity> {
  return this.http.patch(`${this.API}/${id}`, user).pipe(
    map(data => data as ContentHrmanagerEntity),
    catchError((err: HttpErrorResponse) => {
      if(err.status === 404) {
        return of(null);
      }
      return throwError(err);
    })
  );
}
  • form中添加代码如下：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/**
 * 更新
 */
update() {
  const id = this.id.nativeElement.value;
  const name = this.name.nativeElement.value;
  const age = this.age.nativeElement.value;

  const user = {
    'name': name
  };

  const user$ = this.hrManagerService.updateSomeUser(+id, user);
  user$.subscribe(
    u => {
      if(u === null) {
        return;
      }
      console.log('id = ' + u.id + '  name = ' + u.name + '  age = ' + u.age
    )},
    err => {
      const errorResponse = (err as HttpErrorResponse);
      console.log(
        '   error   => ' + errorResponse.error,
        '\n message => ' + errorResponse.message);
    });
}
  • 测试

测试的步骤跟上记PUT类似，上记代码我们是只更新name字段，如果想更新别的字段，继续在里面添加就行了，类似：

1
2
3
4
const user = {
  'name': name,
  'age': +age
}

4. 编写DELETE代码

  • service中添加代码如下：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
/**
 * 如果删除成功，则返回user数据（只不过这时候的id，name等对应的值是undefined）
 *
 * 如果api的地址不存在，返回null
 *
 * 其他错误，抛出异常err
 *
 * @param id 被删除的id
 */
public deleteUserById(id: number): Observable<ContentHrmanagerEntity> {
  return this.http.delete(`${this.API}/${id}`).pipe(
    map(data => data as ContentHrmanagerEntity),
    catchError((err: HttpErrorResponse) => {
      if(err.status === 404) {
        return of(null);
      }
      return throwError(err);
    })
  );
}
  • form中添加代码如下：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
 /**
  * 删除
  */
delete() {
  const id = this.id.nativeElement.value;
  const user$ = this.hrManagerService.deleteUserById(+id);
  user$.subscribe(
    u => {
      if(u === null) {
        return;
      }
      console.log('id = ' + u.id + '  name = ' + u.name + '  age = ' + u.age
    )},
    err => {
      const errorResponse = (err as HttpErrorResponse);
      console.log(
        '   error   => ' + errorResponse.error,
        '\n message => ' + errorResponse.message);
    });
}
  • 测试

测试方法跟上记类似，只不过删除后，具体字段值变成了undefined。