如何在React中作Ajax 请求？

如何在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更新的，由此触发一个从新渲染，而后职位的信息就能够看见了