继续改造上一个 voting-app ，在之前的版本中，我们获取数据的方式是由一个 json 文件中写好了数据，然后以 import 的方式导入，将其赋值给一个变量，而这个变量存储的就是 json 文件中的数据。
在ProductList.js中：
import products from '../products.json'

现在，我们要弄一个自己的服务器，然后把这个 json 文件放在服务器上，再通过 axios 从服务器中获取数据。

首先，推荐一个快速搭建 json 服务器的工具： json-server 。具体介绍可以查看 json-server 。
安装：在命令行中输入 npm install json-server -g 。等待下载就可以了。 -g 是指全局安装。Mac用户如果出现 permission denial 的情况，则改为输入 sudo npm install json-server -g ，然后输入自己的密码即可。

然后，将之前自己编写的 products.json 改写一下，部分代码如下：

接着就可以使用 json-server 来模拟我们的数据了。进入到项目文件夹，在命令行输入：
json-server ./src/products.json --port=3001
这里的 --port=3001 参数，是指设置server的端口，它的默认端口是3000，会和 create-react-app 创建的React的项目的端口发生冲突，所以要自己另外换一个端口避免冲突。该命令后执行成功以后，在浏览器中输入 localhost:3001/products 或者 127.0.0.1:3001/products ，就可以看到我们的 products.json 的数据了：

现在，让我们在 voting-app 中访问并获取这些数据。获取这些数据由很多种方式，可以自己手写那一套 XMLHttpRequest 的步骤来获取数据。不过我们有更好的，别人写好的库来让我们更方便的获取数据，如 fetch ， axios 。这里我们使用 axios 。想详细了解的可以查看 axios

我们要在 voting-app 中安装这个库。进入项目文件夹，在命令行中输入：
npm install axios --save
yarn add axios
等待安装结束。在查看 package.json ，可以发现：
首先，在ProductList组件中引用 axios ：
import axios from 'axios'

然后，使用 axios 发送数据请求，这个过程是发生在 componentDidMount 这个生命周期里，具体的生命周期在以后会详细阐述。

  componentDidMount = () => {
    axios.get('http://127.0.0.1:3001/products').then(response => {
      console.log(response)
    }).catch(error => {
      console.log(error)
使用get方式获取数据get(url)中的参数是指获取数据的URL地址。显然，axios是支持Promise的，如果数据获取成功，则会存放在response中，否则，如果发生异常，将会把异常的信息存放在error中。

现在让我们看看控制台打印的情况。

在数据获取成功以后，就可以使用setState来更新数据了。
  componentDidMount = () => {
    axios.get('http://127.0.0.1:3001/products').then(response => {
      response = response.data
      this.setState({
        products: response
    }).catch(error => {
      console.log(error)
看看页面，发现和预期的结果一致。