为了账号安全,请及时绑定邮箱和手机立即绑定

如何向最终用户显示来自 API 的错误消息?

如何向最终用户显示来自 API 的错误消息?

子衿沉夜 2022-09-21 21:40:42

当用户尝试上传不是图像的文件时,我试图显示来自 REST API 的错误消息。

从 API 返回的 JSON 类似于:

{
    "publicError": "Could not be uploaded, it is not an image!",
    "innerError": "WrongImageTypeException()"
    }

但我不知道它如何向用户显示。

我试过了

this.setState({ errorMesage: { ...err } })

控制台日志看起来像这样

http://img4.sycdn.imooc.com/632b1473000125ee09600177.jpg

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 回答

?
沧海一幻觉

TA贡献1511条经验 获得超5个赞

您的显示对象的结构:console.debug(this.state.errorMesage);

//img3.sycdn.imooc.com/632b148f0001914411800180.jpg

从结构中,您可以看到 包含您要查找的结构:this.state.errorMesage.response.data


"publicError": "Could not be uploaded, it is not an image!",

"innerError": "WrongImageTypeException()"

修复

所以而不是你应该使用 👍🏻...err...err.response.data



查看完整回答
反对 回复 2022-09-21

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信