jQuery $.ajax
這是一個快速又粗暴的方案。在舊版本的官方 React 教程（official React tutorial）中，他們使用了 jQuery $.ajax 來示范如何從服務器獲取數據。如果你是剛剛開始學習和把玩 React，jQuery 可以節省你大量入門和開發的時間，因為我們都對 jQuery 非常熟悉了。這是 jQuery 實現 AJAX 的例子：
loadCommentsFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data}); // 注意這里
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
}
P.S. 這代碼段摘自舊版本的官方教程
這里演示了如何在一個 React 組件里面使用 jQuery 的 $.ajax。唯一需要注意的是如何在 success 回調里面調用 this.setState() ，即當 jQuery 成功收到數據之后應該如何通過 React 的 API 更新 state 的。
然而，jQuery 是一個包含很多功能的大頭兒，只為了用一下 AJAX 功能而引入整個 jQuery 是沒有意義的（除非你還使用 jQuery 做了很多別的事情）。So，用什么才好？答案是 fetch API。
Fetch API
https://github.com/github/fetch
Fetch 是個新的、簡單的、標准化的API，旨在統一Web通信機制，並替代 XMLHttpRequest。它已經被主流瀏覽器所支持，針對較舊的瀏覽器也有了一個 polyfill （Benz亂入：polyfill 直譯是填充工具，就是舊瀏覽器本來不支持某個新的JS API，引入一段js代碼后就支持了，這一段js代碼給舊瀏覽器”填充“了一個API。這個單詞我實在不知道怎么翻譯 ，感覺反而保留原單詞不翻譯更能讓讀者理解。）。如果你在使用 Node.js ，你也可以通過 node-fetch 來使 Node.js 支持 Fetch。
若把上述用 jQuery $.ajax 的代碼段改成 fetch 實現的話，代碼應該長這樣子：
loadCommentsFromServer: function() {
fetch(this.props.url).then(function(response){
// 在這兒實現 setState
});
}
在一些流行的 React 教程中你也許會發現 fetch 的身影。要了解更多關於 fetch 的情況，可參考下列鏈接（全英文）：
SuperAgent
https://github.com/visionmedia/superagent
SuperAgent 是一個輕量級的 AJAX API 庫，為更好的可讀性和靈活性而生。如果某些原因讓你不太想用 fetch，那么 SuperAgent 就幾乎是必然的選擇了。SuperAgent 的用法大概是這樣的：
loadCommentsFromServer: function() {
request.get(this.props.url).end(function(err,res){
// 在這兒實現 setState
});
}
SuperAgent 也有 Node.js 版本，API 是一樣的。如果你在用 Node.js 和 React 開發同構應用（Benz 亂入：這個鏈接是我加的，旨在照顧初學者），你可以用 webpack 之類的東西嵌入 superagent 並讓它適用於瀏覽器端。因為瀏覽器端和服務器端的 API 是一樣的，所以其 Node.js 版本不需要修改任何代碼就可以在瀏覽器上運行。
Axios
https://github.com/axios/axios
Axios 是一個基於 promise 對象（Benz 亂入：這個鏈接也是我加的）的 HTTP 客戶端。與 fetch 和 superagent 一樣，它同時支持瀏覽器端和 Node.js 端。另外你可以在其 Github 主頁上發現，它有很多很實用的高級功能。
這是 Axios 的大概用法：
loadCommentsFromServer: function() {
axios.get(this.props.url).then(function(response){
// 在這兒實現 setState
}).catch(function(error){
// 處理請求出錯的情況
});
}
Request
https://github.com/request/request
若不介紹這個 request 庫，感覺上本文會不太完整。這是一個在思想上追求極簡設計的JS庫，在 Github 上擁有超過 12k 的 star （Benz 亂入：我翻譯這文章時已經 16k+ star 了）。它也是最流行的 Node.js 模塊之一。進入它的 GitHub 主頁 了解更多。
用法示例：
loadCommentsFromServer: function() {
request(this.props.url, function(err, response, body){
// 在這兒實現 setState
});
}
我的選擇
因為 fetch 是新的標准化的API，所以，在任何需要 AJAX 的地方（不論在 React 里或是其他所有 JS 應用），我都更傾向於使用 fetch。
轉自：https://www.jianshu.com/p/75598d56edfe