如何从 API 向最终用户显示错误消息?
Posted
技术标签:
【中文标题】如何从 API 向最终用户显示错误消息?【英文标题】:How can I show error message from API to the end-user? 【发布时间】:2019-08-25 14:04:26 【问题描述】:当用户尝试上传不是图像的文件时,我试图显示来自 REST API 的错误消息。
API 返回的 JSON 类似于:
"publicError": "Could not be uploaded, it is not an image!",
"innerError": "WrongImageTypeException()"
但我不知道它如何显示给用户。
我试过了
this.setState( errorMesage: ...err )
控制台日志看起来像这样https://cdn1.imggmi.com/uploads/2019/4/4/f642ed4326147b3f2c6899e78d415771-full.png。
如何显示此响应错误消息?
后端代码
public ResponseEntity<?> uploadFile(
@RequestHeader(value = "Authorization") String authorizationHeader,
@RequestParam("file") MultipartFile file) throws UserNotFoundException
try
if(!(fileStorageService.checkFileType(file)))
throw new WrongImageTypeException();
catch (WrongImageTypeException error)
return ResponseEntity.status(403).body(new ErrorMessageManager(
"Could not be uploaded, it is not an image!",error.toString()));
前端代码
this.state :
errorMesage:
publicError: "",
,
public uploadHandler()
const formdata: FormData = new FormData();
formdata.set('file', this.state.avatar);
const config =
headers:
'Content-Type': 'multipart/form-data',
'Authorization': `Bearer $cookies.get('tk879n')`
;
axios.post(
`$serverUrl/uploadFile`,
formdata,
config
).then(response =>
this.setState(
userProfile:
...this.state.userProfile,
avatarUrl: response.data,
);
).catch((err) =>
// i want to set error message state and display in render function
this.setState( errorMesage: ...err );
console.debug(this.state.errorMesage);
);
【问题讨论】:
【参考方案1】:您的console.debug(this.state.errorMesage);
显示了对象的结构:
从结构中你可以看到this.state.errorMesage.response.data
包含你正在寻找的结构:
"publicError": "Could not be uploaded, it is not an image!",
"innerError": "WrongImageTypeException()"
修复
所以你应该使用...err.response.data
而不是...err
??
【讨论】:
以上是关于如何从 API 向最终用户显示错误消息?的主要内容,如果未能解决你的问题,请参考以下文章
在 API 调用 Node express 服务器后显示错误消息