教程：如何在React中进行HTTP请求，第3部分

如果您尚未完成 本教程的 第1部分 和 第2部分 ，请在开始第3部分之前完成。

现在，我们进入了很好的阶段！到目前为止，我们已经使用create-react-app建立了一个新的React应用程序，并且我们已经将组件连接起来以记录“成功！”。当我们单击按钮时。现在，我们需要发出实际的HTTP请求。

当我第一次学习React时，我不确定是否有内置的方式来发出HTTP请求。没有。我们将不得不依靠第三方服务来提出我们的请求。我更喜欢axios，但还有其他选择，例如Superagent或fetch。在本教程中，我们将使用axios。

步骤1：安装axios

我们将使用npm安装axios：

npm install axios -S

安装完成后，我们可以看一下文档并开始编写第一个HTTP请求。 旁注： Axios使用Promises。如果您对Promises不熟悉，则可能需要阅读一些有关 Promises的信息，然后再回来。

快速提醒一下，我们的目标是从/users/:username端点取回用户/users/:username 。

第2步：编写获取请求

首先，让我们向组件添加状态。我们将向其添加一个用户名属性，并将其设置为空字符串。添加状态后，构造函数将如下所示：

 constructor () {
super ( )
  this .state = {
    username: ''
  }

  this .handleClick = this .handleClick.bind( this )
}

接下来，在handleClick函数中，我们将调用Github以获取用户。

首先，我们需要将axios导入文件中，以便可以使用它。将此行放在文件顶部，即./App.css导入位置./App.css 。

 import axios from 'axios'

然后，我们可以开始在handleClick函数内部构造请求。

handleClick () {
  axios.get('https://api.github.com/users/maecapozzi')
    .then(response => console.log(response))
}

让我们剖析一下我上面写的内容。我遵循axios设定的语法，并向Github的/users端点发出get请求。该端点看起来像这样：

/users/:username

上面的:username代表您想要的任何用户名。我用maecapozzi替换了:username ，这是我的用户名。您可以用自己的替换它，并取回自己的数据。

我使用.then告诉程序等待数据从Github返回，然后记录响应。

如果复制上面的代码，您将看到已经获得了一个代表控制台中所有用户数据的对象。它看起来像这样：

现在，我需要以一种对我的用户有意义的方式显示此数据。我想从请求中获取用户名。为此，我需要解析该数据，在状态上设置username属性，然后显示它。

我的handleClick函数将如下所示：

handleClick () {
  axios.get('https://api.github.com/users/maecapozzi')
    .then(response => this .setState({username: response.data.name}))
  }

我的render函数将如下所示：

render () {
return (
    <div className='button__container'>
      <button className='button' onClick={ this .handleClick}>
        Click Me
      </button>
      <p>{ this .state.username}</p>
    </div>
  )
}

让我来看一下该应用程序的工作方式。

用户单击一个按钮。按钮上具有onClick事件。
onClick事件触发handleClick函数。
handleClick函数向Github API发出请求，询问发送给它的用户名的用户数据。在此示例中，它获取用户名“ maecapozzi”的数据。
handleClick等待使用Promise从Github返回数据。
handleClick使用从Github API返回的名称更新state上的username属性。
<p>标记显示this.state.username是什么。如果未单击该按钮，它将返回一个空字符串，但是一旦单击该按钮并且请求已完成，它将显示用户名。

现在，在您的屏幕上，单击按钮后，应该显示如下内容：

在那里，您拥有了！您已经在React中发出了第一个HTTP请求！我在下面包括了整个组成部分的要点。您也可以在这里找到此代码，以防您克隆它。

如果您对下面的问题或意见有任何疑问，请告诉我，如果本教程对您有所帮助，请加油！

From: https://hackernoon.com/tutorial-how-to-make-http-requests-in-react-part-3-daa6b31b66be

教程：如何在React中进行HTTP请求，第3部分

步骤1：安装axios

第2步：编写获取请求

相关推荐