react中没有提供专门的请求数据的模块,我们需要使用第三方请求数据模块来实现请求数据,今天来说一说axios。
####准备工作:
首先打开万能的工具包:https://www.npmjs.com,搜索axios,可以看到安装方法:文档里面有写https://www.npmjs.com/package/axios,参照文档开始学习了。
####1:安装axios
安装axios的时候记得要写–save,表示把模块写入配置文件,不然别人接到这个项目的时候会出现运行不了的情况哦。
cnpm install axios --save
####2:引入axios 模块
老规矩,一定要记得在当前写代码的组件里面引入axios 模块。
import axios from 'axios'
####3:写一个点击事件按钮和方法
写一个点击事件按钮和方法,当点击按钮的时候,会触发绑定在按钮上的方法,执行方法里面的内容。
<button onClick={this.getData}>获取api接口</button>
####4:获取数据的方法
打开官方文档,根据文档可以知道,我们需要复制一个请求获取数据的方法,到上一步的方法里面去执行。
####5:准备一个免费的api
https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%B5%B7
这是在网上找的,准备用于此次demo的测试api,这些api后端已经处理允许跨域,所以很方便,不需要考虑因为跨域问题而调用不到接口,不过存在跨域问题,我们也是有办法解决哒,后面文章里面会继续写到。
注意:没有找到的小伙伴,可以查看这篇文章里面
####传送门:
收集了一些免费的api接口
https://www.jianshu.com/p/0182e59df879
把api放在方法里面调用
getData=()=>{
var api='https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%B5%B7';
axios.get(api)
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
});
}
####6:测试
代码完成之后,进行测试,点击按钮,会发现接口数据被请求过来并且打印在控制台,说明数据成功请求到前端,接下来就是要渲染到前端界面了。
####7:渲染
把数据渲染到前端暂时就不写了,因为渲染不同json格式的数据,在后面详细已经写成一篇文章啦,见下一篇咯。
示例代码:Axios.js
import React from 'react';
import axios from 'axios'
class Axios extends React.Component {
//构造函数
constructor() {
super();
//react定义数据
this.state = {
}
}
//请求接口的方法
getData=()=>{
var api='https://www.apiopen.top/weatherApi?city=%E4%B8%8A%E6%B5%B7';
axios.get(api)
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
});
}
render() {
return (
<div>
<h2>axios获取数据</h2>
<button onClick={this.getData}>获取api接口</button>
</div>
)
}
}
export default Axios;
https://www.jianshu.com/nb/33617024](https://img-blog.csdnimg.cn/20200603103627998.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ==,size_16,color_FFFFFF,t_70)