1、新增知识点

/**
Axios获取服务器数据(无法跨域,只能让后台跨域获取数据)
react获取服务器APi接口的数据:
react中没有提供专门的请求数据的模块。但是我们可以使用任何第三方请求数据模块实现请求数据
axios介绍: https://github.com/axios/axios axios的作者觉得jsonp不太友好,推荐用CORS方式更为干净(后端运行跨域)
1、安装axios模块npm install axios --save / npm install axios --save
2、在哪里使用就在哪里引入import axios from 'axios'
3、看文档使用
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';
axios.get(api)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
}); 2、fetch-jsonp https://github.com/camsong/fetch-jsonp
fetch-jsonp请求:返回url会带回一个callback=
1、安装 npm install fetch-jsonp --save
2、import fetchJsonp from 'fetch-jsonp'
3、看文档使用
fetchJsonp('/users.jsonp')
.then(function(response) {
return response.json()
}).then(function(json) {
console.log('parsed json', json)
}).catch(function(ex) {
console.log('parsing failed', ex)
})
4、其他请求数据的方法也可以...自己封装模块用原生js实现数据请求也可以... 远程测试API接口:
get请求:
http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20
jsonp请求地址:
http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&callback=?
*/

2、案例实现

class Home12 extends React.Component{
constructor(props){
console.log("组件加载,首先加载构造方法---1")
super(props);
this.state={
msg:"HOME12 组件信息",
list:[],
listjson:[]
}
}
componentWillMount() {
console.log("构造函数加载完成后,会加载componentWillMount(组件将要挂载)----2")
}
getData=()=>{
//通过axios获取数据
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20';
alert("获取数据");
axios.get(api).then((response)=> {
console.log(response.data.result); //接口返回数据
this.setState({
//用到this,要用到this取向
list:response.data.result
})
}).catch(function (error) {
console.log(error);//捕获异常数据
})
}
getfetchjsonpData=()=>{
//通过fetchjsonp获取数据
var api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20";
fetchJsonp(api)
.then(function(response) {
return response.json()//返回的json数据
}).then((json) =>{
//console.log('parsed json', json)
this.setState({
listjson:json.result
})
}).catch(function(ex) {
console.log('parsing failed', ex)
})
}
render() {
console.log("数据将要渲染---3")
return(
<div>
<h2>HOME12组件首页</h2>
<h1>axios获取数据</h1>
<button onClick={this.getData}>获取服务器api接口数据</button>
<hr/>
<ul>
{
this.state.list.map( (value,key) =>{
return(<li key={key}>{value.title}</li>)
})
}
</ul>
<hr/>
<h1>fetch-jsonp获取数据</h1>
<button onClick={this.getfetchjsonpData}>获取服务器api接口数据</button>
<hr/>
<ul>
{
this.state.listjson.map( (value,key) =>{
return(<li key={key}>{value.title}</li>)
})
}
</ul>
</div>
)
}
//生命的周期函数---组件加载完成
componentDidMount() {
console.log("组件加载完成---4")
this.getData();
}
}

Reactjs之Axios、fetch-jsonp获取后台数据的更多相关文章

  1. Vue axios异步获取后台数据alert提示undefined

    记录一个小问题,关于分页查询套餐 前台通过axios异步请求获取后台数据alert弹出数据提示undefined 下面有三个bean PageResult /** * 分页结果封装对象 */ publ ...

  2. bootstrap table通过ajax获取后台数据展示在table

    1. 背景 bootstrap table 默认向后台发送语法的dataType为 json,但是为了解决跨域问题我们需要将dataType改为jsonp,这时就需要修改bootstrap table ...

  3. 用ajax获取后台数据,返回json数据,怎么在前台使用?

    用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台 C# code   ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 if (dataType == &qu ...

  4. Struts1.x下使用jquery的Ajax获取后台数据

        jquery中有多种Ajax方法来获取后台数据,我使用的是$.get()方法,具体的理论我不解释太多,要解释也是从别的地方copy过来的.下面就介绍我的项目中的实现方法.     前台页面: ...

  5. Java获取后台数据,动态生成多行多列复选框

    本例目标: 获取后台数据集合,将集合的某个字段,比如:姓名,以复选框形式显示在HTML页面 应用场景: 获取数据库的人员姓名,将其显示在页面,供多项选择 效果如下: 一.后台 查询数据库,返回List ...

  6. 前台通过ajax获取后台数据,PHP如何返回中文数据

    现在经常使用Ajax调用后台php获取后台数据,但是PHP返回的数据如果含有中文的话,Ajax会无法识别,那咋整呢,我用的是比较笨的方法,但是实用: 方法一: echo urldecode(json_ ...

  7. jsonp获取服务器数据的方式

    jsonp获取服务器的数据,有两种 一,跨域 二,不跨域 如果跨域 js的写法有两种 1, <script type="text/javascript"> $(func ...

  8. easyui panel异步获取后台数据在前台显示

    我在使用easyui的时候,想做一个向下图所示的效果,这个panel的样式已经做好了,想从后台异步获取json数据,然后填入到文本框中,不知道哪位大神能给点指导?万分感谢! 放入表单中,使用form对 ...

  9. js 获取后台数据分页

    页面创建一个存放内容的容器,以及分页的容器: <div id="content"></div> <div id="pager"&g ...

随机推荐

  1. DedeAMPZ配置php的curl扩展

    DedeAMPZ配置php的curl扩展  curl是一个利用URL语法在命令行方式下工作的文件传输工具.它支持很多协议:FTP, FTPS, HTTP, HTTPS, GOPHER, TELNET, ...

  2. linux命令详解——lsof

    lsof全名list opened files,也就是列举系统中已经被打开的文件.我们都知道,linux环境中,任何事物都是文件, 设备是文件,目录是文件,甚至sockets也是文件.所以,用好lso ...

  3. linux发行版及版本号

    1991年8月:Linus Torvalds宣布成立Linux            遵行GPL: Kernel:底层监控程序又叫通用程序,即我们所说的操作系统    Kernel的作用:       ...

  4. 第10课:[实战] Redis 网络通信模块源码分析(3)

    redis-server 接收到客户端的第一条命令 redis-cli 给 redis-server 发送的第一条数据是 *1\r\n\$7\r\nCOMMAND\r\n .我们来看下对于这条数据如何 ...

  5. 安装tidb数据库

    1.下载压缩包 安装tar包路径 命令:wget http://download.pingcap.org/tidb-latest-linux-amd64.tar.gz 命令:wget http://d ...

  6. Gym - 101170B British Menu (强连通缩点+dp)

    题意:求一个有向图上的最长路(每个强连通分量的点不超过5个) 首先对强连通分量缩点,暴力预处理出len[k][i][j]表示第k个强连通分量里的第i个点和第j个点之间的最长路径,设状态(k,i,f)表 ...

  7. Mac 安装RN android开发环境

    前言 前面介绍了MAC 安装,再来讲讲mac 安装 安卓的开发环境 首先貌似很多Mac自带安卓JDK ,你可以在终端上输入java -version 看是否已经有java开发环境. 如果没有java开 ...

  8. SP Flash Tool版本对应MTK处理器型号速查(SP Flash Tool Download)

    SP Flash Tool For Windows Download https://monkey8.pipipan.com/dir/19250369-32189369-ac1637/ SP Flas ...

  9. Anaconda 安装+使用+换源+更新

    anaconda官网下载安装:https://www.continuum.io/downloads/ anaconda用法:查看已经安装的包:pip list 或者 conda list 安装和更新: ...

  10. CSS3实现穿墙广告效果

    ㈠分享一组很有趣的代码: 具体如下: <!doctype html> <html> <head> <meta charset="UTF-8" ...