【React系列教程六】获取服务器api接口数据、用dangerouslySetInnerHTML解析html标签

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)
    })

 

方法3：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>'}}/>