如何在React中做Ajax 请求
Closed this issue · 5 comments
如何在React中做Ajax 请求？
首先：React本身没有独有的获取数据的方式。实际上，就React而言，它甚至不知道有服务器画面的存在。
React只是简单地渲染组件，单独从两个地方获取数据：props 和 state。
因此，为了使用服务器的数据，你需要在你的组件（component）的props或state里拿到数据。
你可以将这个过程与服务和数据模型复杂化，就像你所希望的那样，但最终只是组件渲染props和state。
选择一个HTTP 库
为了获取来自服务器的数据，你需要一个HTTP库，网上有很多，最终他们都做同样的事情，但他们有不同的特点。
- 喜欢
Promise？那就选axios吧：https://github.com/mzabriskie/axios - 讨厌
Promise?，但是喜欢callback？不妨看看superagent？https://github.com/visionmedia/superagent
当然，你也可以选择自己封装一个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/reactjs.json。
有两点你需要注意的是：
- 你可以在任意的subreddit URL末尾处附加上
.json并且获得那个职位的json形式的展示 - 如果你忘记
www，你将会得到一个CORS错误（至少我没有忘记）
因为Axios使用Promise，所有我们可以链式调用then方法来处理response。获取的职位信息是一点一点的转换后提取的，最重要的一点是，组件的状态(state)是由职位与新数组调用this.setState更新的，由此触发一个重新渲染，然后职位就可以看见了
手机端的react页面 配合ajax库 有什么好的方案吗？
可以使用zepto的ajax模块，或者自己封装一个
翻译的文章，标注原地址
export 是异步的，这样的做法在实际项目中并不具备多大意义。