版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33237207/article/details/89355073
react中没有提供专门的请求数据的模块,但是我们可以使用任何第三方请求数据模块实现请求数据。
一、获取服务器api接口数据
方法1:axios(https://github.com/axios/axios)
axios的作者觉得jsonp不太友好,推荐用CORS方式更为干净(后端运行跨域)
1、安装axios模块【cnpm install axios --save】 / 【npm install axios --save】
2、在哪里使用就在哪里引入import axios from 'axios'
3、看文档使用
var url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';//接口后台允许跨域了,否则获取不到数据
axios.get(url)
.then((response) => {
console.log(response);
this.setState({
list: response.data.result
})
})
.catch(function (error) {
console.log(error);
});
方法2:fetch-jsonp(https://github.com/camsong/fetch-jsonp)
1、安装 【npm install fetch-jsonp --save】
2、import fetchJsonp from 'fetch-jsonp'
3、看文档使用
var url = 'http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';
fetchJsonp(url)
.then(function (response) {
return response.json()
}).then((json) => {
console.log('parsed json', json)
this.setState({
list: json.result
})
}).catch(function (ex) {
console.log('parsing failed', ex)
})
方法2:jquery中的ajax请求
1、安装 【npm install jquery --save】
2、import $ from 'jquery'
3、使用:
$.ajax({
url:url,
dataType:'json',
success:response=>{
console.log(response);
this.setState({
list: response.result
})
},
error:(xhr,status,error)=>{
console.log(error);
}
})
方法4:其他请求数据的方法也可以
自己封装模块用原生js实现数据请求也可以...
二、解析html标签
文档地址(https://zh-hans.reactjs.org/docs/dom-elements.html),用法如下:
<div dangerouslySetInnerHTML={{__html:'<h3>hello</h3>'}}/>