react学习之旅十一：React远程数据请求

React使用封装的Axios请求远程数据。

一、安装Axios

根据项目需要在终端输入以下命令中的一条（这里我用的是npm install -save axios）：

npm install axios           //安装到node_modules目录下，不写入依赖
npm install -g axios        //安装到全局
npm install -save axios     //安装到生产环境中（项目跑起来必须要）
npm install -save-dev axios //安装到开发模式中

以上这几个安装命令的区别：

见博客https://www.cnblogs.com/hjbky/p/8989030.html、https://www.cnblogs.com/twoheads/p/9754786.html

二、EasyMock模拟接口数据

进入easy-mock网站：https://www.easy-mock.com 注册一个账号并登录

点击右下角的蓝色加号，创建一个自己的项目

点击进入项目并创建接口

写入小姐姐菜单的模拟数据，并创建接口

三、Axios请求远程数据

清空一下初始化时的list数据，避免对请求来的数据造成视觉上的误会。

在生命周期函数componentDidMount中进行数据的请求，复制之前创建的接口的地址到请求的url，代码如下：

componentDidMount(){
    axios.get('https://www.easy-mock.com/mock/5fa9f41e234c9b0d8babebae/ReactDemo01/xiaojiejie')
        .then((res)=>{
            console.log('axios获取数据成功'+JSON.stringify(res))
            this.setState({
                list:res.data.data
            })
        })
        .catch((error)=>{
            console.log('axios获取数据失败'+error)  
        })
}

如果之前没有配置过跨域，会发现这里的数据请求被拦截，这是因为我们项目的地址和easy-mock地址不在同一个域。往往前后端分离开发不在同一个域名下时，前端访问后台API都会跨域造成请求失败。

配置服务代理实现跨域请求：

在package.json中加入proxy，允许跨域访问easy-mock下的api

{
  "name": "demo01",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    ...
  },
  "scripts": {
    ...
  },
  "eslintConfig": {
    ...
  },
  "proxy":"https://www.easy-mock.com",
  "browserslist": {
    ...
  }
}

修改componentDidMount

componentDidMount(){
    axios.get('/mock/5fa9f41e234c9b0d8babebae/ReactDemo01/xiaojiejie')
        .then((res)=>{
            console.log('axios获取数据成功'+JSON.stringify(res))
            this.setState({
                list:res.data.data
            })
        })
        .catch((error)=>{
            console.log('axios获取数据失败'+error)  
        })
}

数据请求成功