如何在React中做Ajax 请求？

如何在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

更新的，由此触发一个重新渲染，然后职位就可以看见了