在执行 axios 发布请求时，如何解决与 typescript 反应时未捕获的 promise 错误？答案

【问题标题】：How do I fix a uncaught in promise error in react with typescript when doing a axios post request?在执行 axios 发布请求时，如何解决与 typescript 反应时未捕获的 promise 错误？
【发布时间】：2021-04-23 22:39:42
【问题描述】：

这是我用于添加企业的.tsx 文件。

当我运行程序时，我可以输入输入，但是当我点击提交按钮时，什么也没有发生。

我的应用程序中有一个页面，其中包含用于添加新企业的按钮。单击添加企业按钮时，将显示一个表单，其中包含名称输入字段和提交按钮。当用户填写企业名称应出现在企业表中的表单后点击提交。

export default class AddEnterprise extends React.Component {
  state = {
    name: '',
  }

  handleChange = event => {
    this.setState({ name: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    const enterprise = {
      name: this.state.name
    };

    axios.post(`${process.env.PUBLIC_URL}/api/enterprises`, { enterprise })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
        <div>
    <form onSubmit={this.handleSubmit}>
      <label>
        Enterprise Name:
        <input type="text" name="name" onChange={this.handleChange} />
      </label>
      <button type="submit">Add</button>
    </form>
  </div>
    )
  }
}

在开发者控制台中出现以下错误：

加载资源失败：服务器响应状态 400 () createError.js:16 Uncaught (in promise) 错误：请求失败，状态码为 400 在 createError (createError.js:16) 定居时 (settle.js:17) 在 XMLHttpRequest.handleLoad (xhr.js:61)

我是 typescript/react 的新手，如果有任何见解/解决方案，我将不胜感激。

【问题讨论】：

未捕获的承诺是当axios.post(...).then(...) 时，如果承诺解决为错误，则您那里没有处理程序。试试这个：axios.post(...).then(...).catch(err => console.log(err)).

标签： reactjs typescript axios

【解决方案1】：

你可以像这样在 axios 中捕获错误：

axios({
    ...
}).then((response) => {
    ....
}).catch((error) => {
    if( error.response ){
        console.log(error.response.data); // => the response payload 
    }
});

【讨论】：