如何在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更新的，由此觸發一個從新渲染，而後職位的信息就能夠看見了