在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中的数据请求的更多相关文章

  1. React 中的 AJAX 请求:获取数据的方法

    React 中的 AJAX 请求:获取数据的方法 React 只是使用 props 和 state 两处的数据进行组件渲染. 因此,想要使用来自服务端的数据,必须将数据放入组件的 props 或 st ...

  2. [Web 前端] 如何在React中做Ajax 请求?

    cp from : https://segmentfault.com/a/1190000007564792 如何在React中做Ajax 请求? 首先:React本身没有独有的获取数据的方式.实际上, ...

  3. 哪种方式更适合在React中获取数据?

    作者:Dmitri Pavlutin 译者:小维FE 原文:dmitripavlutin.com 国外文章,笔者采用意译的方式,以保证文章的可读性. 当执行像数据获取这样的I/O操作时,你必须发起获取 ...

  4. react中使用Ajax请求(axios,Fetch)

    React本身只关注于界面, 并不包含发送ajax请求的代码,前端应用需要通过ajax请求与后台进行交互(json数据),可以使用集成第三方ajax库(或自己封装) 常用的ajax请求库 jQuery ...

  5. React中的fetch请求相关

    fetch在reactjs中等同于 XMLHttpRequest,它提供了许多与XMLHttpRequest相同的功能,但被设计成更具可扩展性和高效性. Fetch 的核心在于对 HTTP 接口的抽象 ...

  6. vue2整个项目中,数据请求显示loading图

    一般项目中,有时候会要求,你在数据请求的时候显示一张gif图片,然后数据加载完后,消失.这个,一般只需要在封装的axios中写入js事件即可.当然,我们首先需要在app.vue中,加入此图片.如下: ...

  7. vue2整个项目中,数据请求显示loading图----------未完成阅读,码

    一般项目中,有时候会要求,你在数据请求的时候显示一张gif图片,然后数据加载完后,消失.这个,一般只需要在封装的axios中写入js事件即可.当然,我们首先需要在app.vue中,加入此图片.如下: ...

  8. 小程序中的数据请求sessionid,保持登陆状态。

    版权声明:本文为CSDN博主「weixin_43964779」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net ...

  9. React中的Context——从父组件传递数据

    简介:在React中,数据可以以流的形式自上而下的传递,每当你使用一个组件的时候,你可以看到组件的props属性会自上而下的传递.但是,在某些情况下,我们不想通过父组件的props属性一级一级的往下传 ...

随机推荐

  1. java-BigDecimal类

    1.BigDecimal类的概述和方法使用 * A:BigDecimal的概述 * 由于在运算的时候,float类型和double很容易丢失精度. * 所以,为了能精确的表示.计算浮点数,Java提供 ...

  2. 莫队算法 [国家集训队]小Z的袜子

    题目链接   洛古   https://www.luogu.org/problemnew/show/P1494 大概说下自己的理解 先来概率的计算公式   ∑C(2,f(i))  /  C(2,r−l ...

  3. java的数组和arraylist

    1.数组 1.0   一开始就错了 int a[8];   //没有像C在内存中开辟了8个区域 改: int a[] = {1,2,3} ; System.out.println(a.length); ...

  4. linux之shell终端使用操作快捷键

    所谓的shell终端就是桌面右键里面的打开终端那个终端 敲命令是一件很有趣的事,可是有时候我们会遇到一些很麻烦的事 例如,命令太长导致敲完后一大串字符可读性低,想把vi filename 快速改为ca ...

  5. linux——git安装使用

    系统环境centos7 安装git命令 yum install git -y 安装好之后使用命令查看git版本 git –version [root@bogon ~]# git --version g ...

  6. MySQL--批量插入导致自增跳号问题

    对于批量插入数据的操作,MySQL申请自增的策略为: 在批量插入语句执行过程中,申请策略: .第一次申请自增值时,会分配1个 .在N次申请自增值时,会分配上一次(第N-1次)的2倍. 测试Demo: ...

  7. jquery 复选框(选中/取消)获取状态

    $("#login-rem").attr("checked","checked") //设置选中 $("#login-rem&qu ...

  8. 使用 Composer 查看 FastAdmin 项目 组件的版本

    比如查看 ThinkPHP 的版本号. 使用命令 composer show topthink/* 显示如下,可以看到 ThinPHP 版本为 V5.0.12:

  9. mysql查看某库表大小

    查询所有数据库占用磁盘空间大小的SQL语句: 语句如下 select TABLE_SCHEMA, concat(truncate(sum(data_length)/1024/1024,2),' MB' ...

  10. mydumper安装、原理介绍

    一.安装   安装依赖包: yum install glib2-devel mysql-devel zlib-devel pcre-devel openssl-devel cmake 下载二进制包: ...