Angular HttpClient 錯誤處理 error handling

Angular HttpClient呼叫Spring Boot RESTful API發生錯誤的處理。

請先參考「Angular 使用HttpClient呼叫Spring Boot RESTful API」。

當在Angular以HttpClient呼叫後端API時發生錯誤，可加上第二個callback function處理錯誤回應。

Spring Boot的DemoController.getHello()內容修改如下，丟出RuntimeException來模擬呼叫API發生錯誤。

DemoController

package com.abc.demo.controller;

import com.abc.demo.dto.HelloDto;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@CrossOrigin(origins = "http://localhost:4200")
@RestController
public class DemoController {

    @GetMapping(value = "/hello")
    public HelloDto getHello() {
        throw new RuntimeException("get hello error!!"); // 模擬呼叫此API發生錯誤
//        return new HelloDto("Hello! This is from Spring Boot RESTful API!");
    }

}

開啟Angular專案的HelloComponent (hello.component.ts)，在getHello()函式中ApiService.getHello()回傳的Observable.subscribe()加入第二個callback function error(error HttpErrorResponse)處理錯誤回應參數HttpErrorResponse。

HelloComponent (hello.component.ts

import { Component, OnInit } from '@angular/core';
import { ApiService } from '../service/api.service'; // 引入ApiService
import { HelloData } from '../data/hello-data'; // 引入HelloData
import { HttpErrorResponse } from '@angular/common/http';

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent implements OnInit {

  hello: string; // 對映hello.component.html頁面的{{hello}}

  constructor(
    private apiService: ApiService // 注入ApiService
  ) { }

  ngOnInit() {
  }

  /** 委託ApiService.getHello()取得內容 */
  getHello() {
    this.apiService.getHello().subscribe(
      value => this.success(value),
      error => this.error(error) // 加入第二個callback function處理錯誤回應
    );
  }

  /** API呼叫成功的處理 */
  success(value: HelloData) {
    this.hello = value.message;
  }

    /** API呼叫失敗的錯誤處理 */
  error(error: HttpErrorResponse) {
    console.log(error.status); // 500
    console.log(error.statusText); // OK
    console.log(error.message); // Http failure response for http://localhost:8080/hello: 500 OK
    console.log(error);
    this.hello = error.error.message;
  }

  /** 清除頁面{{hello}}內容 */
  clear() {
    this.hello = '';
  }

}

完成以上修改後，點選頁面的Get Hello按鈕顯示如下。

• HttpClient Error handling
• Observable in Angular - HTTP