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按鈕顯示如下。
沒有留言:
張貼留言