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)
})
}
数据请求成功