[Web 前端] 如何在React中做Ajax 请求?
cp from : https://segmentfault.com/a/1190000007564792
如何在React中做Ajax 请求?
首先:React
本身没有独有的获取数据的方式。实际上,就React
而言,它甚至不知道有服务器画面的存在。
React
只是简单地渲染组件,单独从两个地方获取数据:props
和 state
。
因此,为了使用服务器的数据,你需要在你的组件(component)的props
或state
里拿到数据。
你可以将这个过程与服务和数据模型复杂化,就像你所希望的那样,但最终只是组件渲染props
和state
。
选择一个HTTP 库
为了获取来自服务器的数据,你需要一个HTTP
库,网上有很多,最终他们都做同样的事情,但他们有不同的特点。
-
喜欢
Promise
?那就选axios
吧:https://github.com/mzabriskie... -
讨厌
Promise
?,但是喜欢callback
?不妨看看superagent
?https://github.com/visionmedi...
当然,你也可以选择自己封装一个ajax库,我喜欢Axios,下面将以这个库作为例子,如果你不喜欢,可以选择其他库看看。
Fetch Data
如下是一个简单的实例,一个组件从subreddit
获取职位。看看这个例子,我们将会了解它是如何工作的
import React from 'react'; import ReactDOM from 'react-dom'; import axios from 'axios'; class FetchDemo extends React.Component { constructor(props) { super(props); this.state = { posts: [] }; } componentDidMount() { axios.get(`http://www.reddit.com/r/${this.props.subreddit}.json`) .then(res => { const posts = res.data.data.children.map(obj => obj.data); this.setState({ posts }); }); } render() { return ( <div> <h1>{`/r/${this.props.subreddit}`}</h1> <ul> {this.state.posts.map(post => <li key={post.id}>{post.title}</li> )} </ul> </div> ); } } ReactDOM.render( <FetchDemo subreddit="reactjs"/>, document.getElementById('root') );
它是如何工作的?
首先,我们将axios
库import
进来。
然后在constructor
里先调用super
,接着初始化state
,让它拥有一个posts
空数组。
componentDidMount
是关键所在,这个方法将会在组件插入DOM
的第一时间执行。该方法在整个组件的生命周期只会执行一次。
它使用axios.get
方法从subreddit
获取数据,反引号的字符串是ES6
的模板字符串,${}
部分是由表达式的值所取代,所以URL
传递给axios.get
实际上是http://www.reddit.com/r/react...。
有两点你需要注意的是:
-
你可以在任意的subreddit URL末尾处附加上
.json
并且获得那个职位的json形式的展示 -
如果你忘记
www
,你会得到一个CORS错误
因为Axios
使用Promise
,所有我们可以链式调用then
方法来处理response
。获取的职位信息是一点一点的转换后提取的,最重要的一点是,组件的状态(state)是由职位与新数组调用this.setState
更新的,由此触发一个重新渲染,然后职位的信息就可以看见了
相关文章
- 【问底】徐汉彬:Web系统大规模并发——电商秒杀与抢购
- JavaEE自定义标签:标签类的创建、tld配置文件的创建(位置、如何创建)、Web-XML配置、JSP应用
- 《ASP.NET MVC4 WEB编程》学习笔记------Web API 续
- 《ASP.NET MVC4 WEB编程》学习笔记------Web API
- Web项目中创建简单的错误处理页面
- [Tools] Using mobile device for debugging your mobile web site
- linux下通过acl配置灵活目录文件权限(可用于ftp,web服务器的用户权限控制)
- 移动WEB应用开发框架moible-web-app开源
- 手机H5 web调试利器——WEINRE (WEb INspector REmote)
- [Whole Web] [AngularJS + Grunt] Using ng-html2js to Convert Templates into JavaScript
- loadrunner12.55:常用函数汇总说明之Web Vuser Functions(WEB)参数函数
- [转]WEB安全编程技术规范(V1.0)
- Atitit web 3.0(web技术)展望与实现 和语义网络 目录 1. 为了说明Web 3.0,我们需要回顾Web历史上的重要浪潮。2 1.1. 2.Web 2.0:任何人可以参与。Web
- Atitit 部署了个webdav服务 as root 目录 1.1. WEB-INF copy to root dir only a web.xml use...1 1.2. Java.ba
- 搭建Dynamic Web Project(动态web项目)的springmvc工程1
- JavaSE学习总结(十九)—— Java Web 综合应用(JSP、Servlet、IDEA、MySQL、JUnit、AJAX、JSON)
- Maven实现Web应用集成測试自己主动化 -- 部署自己主动化(WebTest Maven Plugin)
- python web py入门(41)- 页面事件的onload事件
- 【Web测试】各类web控件测试点汇总,软测人必备
- Web 服务器配置
- Python Web开发最难懂的WSGI协议,到底包含哪些内容?
- Web前端性能优化_浏览器渲染引擎与阻塞