03.使用axios获取数据

继续改造上一个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改写一下，部分代码如下：

{
  "products": [
    {
      "id": 1,
      "title": "Yellow Pail",
      "description": "One-demand sand castle construction expertise.",
      "url": "#",
      "votes": "56",
      "submitterAvatarUrl": "images/logo.jpg",
      "productImageUrl": "images/logo.jpg"
    },
    ...
}

接着就可以使用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的数据了：

json-server-json.jpeg

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

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

package-json-dependency.jpeg

---

使用axios
首先，在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中。
现在让我们看看控制台打印的情况。

axios-get-data.jpeg
可以看到，数据成功获取了。而且具体的数据是存放在response.data中。

让我们修改一下URL地址，看看如果发生错误了，会出现什么。
axios.get('http://127.0.0.1:3001/productss')

axios-error-1.jpeg

axios.get('http://127.0.0.1:3002/products')

axios-error-2.jpeg

在数据获取成功以后，就可以使用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)
    })
  }

看看页面，发现和预期的结果一致。

voting-app.jpeg