[Web 前端] 如何在React中做Ajax 請求？

首先：​<code>​React​</code>​本身沒有獨有的擷取資料的方式。實際上，就​<code>​React​</code>​而言，它甚至不知道有伺服器畫面的存在。

​<code>​React​</code>​隻是簡單地渲染元件，單獨從兩個地方擷取資料：​<code>​props​</code>​ 和 ​<code>​state​</code>​。

是以，為了使用伺服器的資料，你需要在你的元件（component）的​<code>​props​</code>​或​<code>​state​</code>​裡拿到資料。

你可以将這個過程與服務和資料模型複雜化，就像你所希望的那樣，但最終隻是元件渲染​<code>​props​</code>​和​<code>​state​</code>​。

為了擷取來自伺服器的資料，你需要一個​<code>​HTTP​</code>​庫，網上有很多，最終他們都做同樣的事情，但他們有不同的特點。

喜歡 <code>Promise</code>？那就選<code>axios</code>吧：https://github.com/mzabriskie...

讨厭<code>Promise</code>?，但是喜歡<code>callback</code>？不妨看看<code>superagent</code>？https://github.com/visionmedi...

當然，你也可以選擇自己封裝一個ajax庫，我喜歡Axios，下面将以這個庫作為例子，如果你不喜歡，可以選擇其他庫看看。

如下是一個簡單的執行個體，一個元件從​<code>​subreddit​</code>​擷取職位。看看這個例子，我們将會了解它是如何工作的

首先，我們将​<code>​axios​</code>​ 庫​<code>​import​</code>​進來。

然後在​<code>​constructor​</code>​ 裡先調用​<code>​super​</code>​，接着初始化​<code>​state​</code>​，讓它擁有一個​<code>​posts​</code>​空數組。

​<code>​componentDidMount​</code>​是關鍵所在，這個方法将會在元件插入​<code>​DOM​</code>​的第一時間執行。該方法在整個元件的生命周期隻會執行一次。

它使用​<code>​axios.get​</code>​方法從​<code>​subreddit​</code>​擷取資料，反引号的字元串是​<code>​ES6​</code>​的模闆字元串，​<code>​${}​</code>​部分是由表達式的值所取代，是以​<code>​URL​</code>​傳遞給​<code>​axios.get​</code>​實際上是​​ 

有兩點你需要注意的是：

你可以在任意的subreddit URL末尾處附加上<code>.json</code>并且獲得那個職位的json形式的展示

如果你忘記<code>www</code>，你會得到一個CORS錯誤

因為​<code>​Axios​</code>​使用​<code>​Promise​</code>​，所有我們可以鍊式調用​<code>​then​</code>​方法來處理​<code>​response​</code>​。擷取的職位資訊是一點一點的轉換後提取的，最重要的一點是，元件的狀态(state)是由職位與新數組調用​<code>​this.setState​</code>​更新的，由此觸發一個重新渲染，然後職位的資訊就可以看見了