如何从 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 服务器后显示错误消息

在 Swift 中向用户显示网络错误消息

密码或用户名错误时如何显示错误消息?

如何从 API 请求中检索错误消息 [重复]

如何根据 React js 中 api 的响应显示成功或错误消息

如何使 php artisan tinker 显示完整的错误(消息)?