在异步等待中向用户显示错误消息

时间:2019-02-20 12:38:09

标签: reactjs error-handling async-await

我有下面类似的代码,可从天蓝色获取照片。当我收到没有可用图像的错误消息时,我捕获了错误并将error.log记录下来。但是,这看起来很丑。有什么更好的显示方式?我不能;无法将其重定向到404,因为此错误不会阻止应用正常运行

fetchImage = async(token) => {
        try {
          const response = await axios
            .get(`https://graph.microsoft.com/v1.0/users/${this.props.authentication._user.userName}/photo/$value`,{
              responseType: 'arraybuffer',
              headers: {'Authorization': 'Bearer ' + token}
            })

            this.setState({
              image: new Buffer(response.data).toString('base64')
            })
        }
        catch (error) {
          console.error(error)
        }
      }

1 个答案:

答案 0 :(得分:0)

您可以在状态上创建新的道具,例如isError


然后您可以控制该道具的错误 (isError)? :“收到的错误”:“保持继续”

state = {
  isError: false
};

fetchImage = async token => {
  try {
    const response = await axios.get(
      `https://graph.microsoft.com/v1.0/users/${
        this.props.authentication._user.userName
      }/photo/$value`,
      {
        responseType: "arraybuffer",
        headers: { Authorization: "Bearer " + token }
      }
    );

    this.setState({
      image: new Buffer(response.data).toString("base64")
    });
  } catch (error) {
    this.setState({
      isError: true
    });
    console.error(error);
  }
};

如果您需要保存错误消息,可以执行此操作

state = {
  error: ""
};

in the catch block 

catch (error) {
  this.setState({
    error: error.message
  });
}

and then check (this.state.error.length) ? "show error" : 'continue working'