如何在React中做Ajax 请求?
首先:React 本身没有独有的获取数据的方式。实际上,就React 而言,它甚至不知道有服务器画面的存在。
React 只是简单地渲染组件,单独从两个地方获取数据:props 和 state 。
因此,为了使用服务器的数据,你需要在你的组件(component)的props 或state 里拿到数据。
你可以将这个过程与服务和数据模型复杂化,就像你所希望的那样,但最终只是组件渲染props 和state 。
选择一个HTTP 库
为了获取来自服务器的数据,你需要一个HTTP 库,网上有很多,最终他们都做同样的事情,但他们有不同的特点。
当然,你也可以选择自己封装一个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...。
有两点你需要注意的是:
因为Axios 使用Promise ,所有我们可以链式调用then 方法来处理response 。获取的职位信息是一点一点的转换后提取的,最重要的一点是,组件的状态(state)是由职位与新数组调用this.setState 更新的,由此触发一个重新渲染,然后职位的信息就可以看见了 (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|