react中的数据请求
在react中,没有提供专门的请求数据的模块,所以我们可以采用第三方请求数据的模块进行数据请求,常见的有axios和fetch-jsonp,下面来总结这两种方式的用法。
axios
查看文档
创建项目
1,使用npx create-react-app react-router创建项目,
2,在src文件夹下新建components文件夹和assets文件夹,在assets文件夹中新建css文件夹和images文件夹,并将src文件夹下的相关文件进行归类。
安装和使用
1,在项目的根目录中执行命令:npm install axios --save进行安装
2,在components文件夹下面新建Axios.js组件,并在App.js中引入该组件。
3,在需要进行数据请求的页面引入axios,所以在Axios.js文件下面通过import引入axios。
4,通过生命周期函数或者相关事件触发数据请求。
5,渲染数据
下面贴出相关代码:axios.js
import React, { Component } from 'react'; import axios from 'axios';
class Axios extends Component {
constructor(props) {
super(props);
this.state = {
list:[]
};
}
getData=()=>{
//通过axios获取服务器数据
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20'; //接口后台允许了跨域
axios.get(api)
// 箭头函数改变this指向
.then((res)=> {
this.setState({
list:res.data.result
})
})
.catch(function (error) {
console.log(error);
});
}
render() {
return (
<div>
<button onClick={this.getData}>获取服务器api接口数据</button>
<br />
<br />
<ul>
{
this.state.list.map((value,key)=>{
return <li key={key}>{value.title}</li>
})
}
</ul>
</div>
);
}
} export default Axios;
fetch-jsonp
查看文档
创建项目
还是上面的项目,继续在components文件夹下面新建fetchJsonp.js文件,并在根组件App.js中引入。
安装和使用
1,在项目根目录执行命令:npm install fetch-jsonp --save进行安装
2,在FetchJsonp.js中引入
3,通过生命周期函数或者相关事件触发数据请求。
4,渲染数据
下面贴出fetchJsonp.js的代码
import React, { Component } from 'react';
import fetchJsonp from 'fetch-jsonp'; class FetchJsonp extends Component {
constructor(props) {
super(props);
this.state = {
list:[]
};
}
getData=()=>{
var api="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20";
fetchJsonp(api)
.then(function(response) {
return response.json()
}).then((json)=> {
this.setState({
list:json.result
})
}).catch(function(ex) {
console.log('parsing failed', ex)
})
}
render() {
return (
<div>
这是fetch-jsonp组件
<br />
<button onClick={this.getData}>获取服务器api接口数据</button>
<ul>
{
this.state.list.map((value,key)=>{
return <li key={key}>{value.title}</li>
})
}
</ul>
</div>
);
}
} export default FetchJsonp;
代码下载:点这里
react中的数据请求的更多相关文章
- React 中的 AJAX 请求:获取数据的方法
React 中的 AJAX 请求:获取数据的方法 React 只是使用 props 和 state 两处的数据进行组件渲染. 因此,想要使用来自服务端的数据,必须将数据放入组件的 props 或 st ...
- [Web 前端] 如何在React中做Ajax 请求?
cp from : https://segmentfault.com/a/1190000007564792 如何在React中做Ajax 请求? 首先:React本身没有独有的获取数据的方式.实际上, ...
- 哪种方式更适合在React中获取数据?
作者:Dmitri Pavlutin 译者:小维FE 原文:dmitripavlutin.com 国外文章,笔者采用意译的方式,以保证文章的可读性. 当执行像数据获取这样的I/O操作时,你必须发起获取 ...
- react中使用Ajax请求(axios,Fetch)
React本身只关注于界面, 并不包含发送ajax请求的代码,前端应用需要通过ajax请求与后台进行交互(json数据),可以使用集成第三方ajax库(或自己封装) 常用的ajax请求库 jQuery ...
- React中的fetch请求相关
fetch在reactjs中等同于 XMLHttpRequest,它提供了许多与XMLHttpRequest相同的功能,但被设计成更具可扩展性和高效性. Fetch 的核心在于对 HTTP 接口的抽象 ...
- vue2整个项目中,数据请求显示loading图
一般项目中,有时候会要求,你在数据请求的时候显示一张gif图片,然后数据加载完后,消失.这个,一般只需要在封装的axios中写入js事件即可.当然,我们首先需要在app.vue中,加入此图片.如下: ...
- vue2整个项目中,数据请求显示loading图----------未完成阅读,码
一般项目中,有时候会要求,你在数据请求的时候显示一张gif图片,然后数据加载完后,消失.这个,一般只需要在封装的axios中写入js事件即可.当然,我们首先需要在app.vue中,加入此图片.如下: ...
- 小程序中的数据请求sessionid,保持登陆状态。
版权声明:本文为CSDN博主「weixin_43964779」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net ...
- React中的Context——从父组件传递数据
简介:在React中,数据可以以流的形式自上而下的传递,每当你使用一个组件的时候,你可以看到组件的props属性会自上而下的传递.但是,在某些情况下,我们不想通过父组件的props属性一级一级的往下传 ...
随机推荐
- java-BigDecimal类
1.BigDecimal类的概述和方法使用 * A:BigDecimal的概述 * 由于在运算的时候,float类型和double很容易丢失精度. * 所以,为了能精确的表示.计算浮点数,Java提供 ...
- 莫队算法 [国家集训队]小Z的袜子
题目链接 洛古 https://www.luogu.org/problemnew/show/P1494 大概说下自己的理解 先来概率的计算公式 ∑C(2,f(i)) / C(2,r−l ...
- java的数组和arraylist
1.数组 1.0 一开始就错了 int a[8]; //没有像C在内存中开辟了8个区域 改: int a[] = {1,2,3} ; System.out.println(a.length); ...
- linux之shell终端使用操作快捷键
所谓的shell终端就是桌面右键里面的打开终端那个终端 敲命令是一件很有趣的事,可是有时候我们会遇到一些很麻烦的事 例如,命令太长导致敲完后一大串字符可读性低,想把vi filename 快速改为ca ...
- linux——git安装使用
系统环境centos7 安装git命令 yum install git -y 安装好之后使用命令查看git版本 git –version [root@bogon ~]# git --version g ...
- MySQL--批量插入导致自增跳号问题
对于批量插入数据的操作,MySQL申请自增的策略为: 在批量插入语句执行过程中,申请策略: .第一次申请自增值时,会分配1个 .在N次申请自增值时,会分配上一次(第N-1次)的2倍. 测试Demo: ...
- jquery 复选框(选中/取消)获取状态
$("#login-rem").attr("checked","checked") //设置选中 $("#login-rem&qu ...
- 使用 Composer 查看 FastAdmin 项目 组件的版本
比如查看 ThinkPHP 的版本号. 使用命令 composer show topthink/* 显示如下,可以看到 ThinPHP 版本为 V5.0.12:
- mysql查看某库表大小
查询所有数据库占用磁盘空间大小的SQL语句: 语句如下 select TABLE_SCHEMA, concat(truncate(sum(data_length)/1024/1024,2),' MB' ...
- mydumper安装、原理介绍
一.安装 安装依赖包: yum install glib2-devel mysql-devel zlib-devel pcre-devel openssl-devel cmake 下载二进制包: ...