从零开始学习React——(十七)：React中使用Axios请求数据。

一个完整的项目离不开数据请求，JavaScript中可以使用ajax远程请求，但是对于SPA项目来说写起来太麻烦，所以本节将介绍如何使用请求框架Axios来实现。Vue项目也可以使用它来用做请求框架。

1. 安装Axios

Axios可以使用npm来安装，可以直接在根目录下，打开Git Bash Here，弹出命令窗口中输入：

	npm install --save axios

然后，只需要等它自动下载完成就好了。

关于 npm install --save 和 npm install --save-dev的区别，可以见另一篇文章：npm install --save 和 npm install --save-dev的区别

2. 项目中使用Axios请求数据

安装好axios之后，需要在使用Ajax的地方先引入axios，比如现在想在Child.js中使用axios，写入下面的代码引入：

	// 引入axios
	import axios from 'axios'

引入后，建议在componentDidMount声明周期函数里请求ajax，当然，可以按照自己的业务需求在其他地方请求。但是尽量避免在render()里面执行。会出现问题。例如：一直循环渲染，在componentWillMount里执行时，在使用React Native时，又会有冲突。

	componentDidMount() {
      axios.post('https://www.v2ex.com/api/topics/hot.json')
        .then((res) => {
            console.log('成功！' + JSON.stringify(res))
        })
        .catch(error => {
            console.log(error)
        })
    }

上述代码为以V2EX API的接口为例，做了一个ajax请求，并且请求到了数据，这就是Axios的简单用法。

项目中使用Axios请求数据是非常重要且频繁的。建议多多练习。Axios的其他属性以及方法。可以参考官方文档：Axios官方文档

3. 使用Axios请求Mock数据

上面的只是利用V2EX的临时接口，做了一下测试，但在实际开发中，是前后端分离的。有时候后端同学没有给到数据的时候，自己需要模拟一些数据，通常把自己模拟数据的过程就叫Mock，也可以用软件自己本地模拟数据，但是尽量还是选择YAPI来模拟接口数据。

PS：本来想选用Easy-Mock，结果在写文章的时候完全打不开它的官网，所以换成YAPI。用法其实还是一样的。都是用来模拟线上接口的

3.1 新建一个接口

首先去YAPI 点击此处直接跳转到YAPI 的网站注册一个账号。关于YAPI如何创建接口，不在此赘述。如不会使用，可自行百度。

创建成功之后，将上面的请求方式改成get(此处看你在YAPI里面创建的请求方式是什么，我这里是get，所以用它)。然后在控制台预览结果。

	 axios.get('https://www.taojibao.cn/mock/486/listData')
        .then((res) => {
            console.log(res.data.list)
        })
        .catch(error => {
            console.log(error)
        })

这时候在控制台会发现数据已经请求成功，接下来，需要把请求到的渲染到页面上。代码如下：

	axios.get('https://www.taojibao.cn/mock/486/listData')
        .then((res) => {
            this.setState({
                list: res.data.list
            })
        })
        .catch(error => {
            console.log(error)
        })

以上就是React中Axios的简单用法。