ReactJS 发出 http 请求并在页面上显示结果答案

【问题标题】：ReactJS making a http request and displaying the result on pageReactJS 发出 http 请求并在页面上显示结果
【发布时间】：2019-09-24 07:28:14
【问题描述】：

我有一个带按钮的搜索栏。单击按钮时，search_on_click 函数运行。该函数应该检索 URL 的 html 并将其显示在页面上。

class App extends Component{
    constructor(props){
        super(props)
        this.state = {
            html: []
        }
        this.search = this.search.bind(this)
    }
    search(){
        const URL = 'https://www.zerochan.net/Re%3AZero+Kara+Hajimeru+Isekai+Seikatsu?s=fav'


        axios.get(URL)
            .then(data =>{
             console.log(data)
                this.setState({
                    query: data
                })
            })
            .catch(function(error){
               console.log(error);
            })

}
    render(){

        return(
         <div>
        <button onClick={() => this.search()}>search</button>
        <div>{this.state.query}</div>
        </div>

这是我到目前为止的代码。问题/疑问是：

axios 不会 console.log html 甚至似乎运行
我已经尝试过 fetch/requests，但问题或多或少是一样的
有更好的方法吗？
我认为这不是 CORS 问题，因为我使用了允许 chrome 扩展的 CORS。
1. .catch() 也不向控制台记录任何内容

感谢您的宝贵时间。

【问题讨论】：

“我不认为这是一个 CORS 问题” 为什么不呢？（顺便说一句，CORS 是一个解决方案，不是问题。问题在于SOP。）
你调试这个发现没有发送请求（通过调试工具的“网络”选项卡？），还是有错误响应？
Axios Example 有一个 .catch 来处理错误情况，您应该使用它。
在网络选项卡中，当我单击应该激活 axios 搜索的按钮时，有一个简短的红色 URL 链接会迅速消失
.then 仅在成功时发生。您应该添加.catch 或以其他方式处理错误。这就是为什么“结果”永远不会出现的原因。

标签： javascript reactjs request axios fetch

【解决方案1】：

您尝试获取的 URL 不是有效资源。您应该点击一个返回一些数据的 URL，在您的情况下，它是一个 HTML，它没有用于传输数据的 API 或启用 CORS 以供您访问它。因此，您将无法获得预期的结果，并且 axios 将无法交付您的请求。

有效 API 请求示例https://codesandbox.io/s/jv73ynwz05

componentDidMount() 在组件运行后立即调用安装（插入树中）。需要 DOM 的初始化节点应该放在这里。 如果您需要从远程端点加载数据，这是一个实例化网络请求的好地方。

  componentDidMount() {
    // Note the api in the URL path, which means it is a valid endpoint
    axios.get('https://randomuser.me/api/?results=50')
      .then(response => {
        const data = response.data.results;
        this.setState({ data })
      })
      .catch(error => {
        console.log(error);
      })
  }

在此处查看类似问题：Enable CORS in fetch api

【讨论】：