5個最好的庫，用於在React中進行AJAX調用
以下React為例，如其他javascript框架與庫也是適用於其中，如vue.js。
在過去的兩年裡一直和React合作。許多React初學者提出的問題之一是：“從服務器獲取數據的React方式是什麼？”或“我應該如何在React中進行AJAX調用”？要回答你的問題，盡可能多的開發者會告訴你，React只是一個視圖庫，你可以隨意使用任何你喜歡的東西。然而，這並沒有多大幫助 – 特別是當JavaScript格局變化如此之快時。因此，在本文中，我將嘗試回答這個基本問題，並列出5個簡單的庫，用於在React中進行AJAX調用。
jQuery $ .ajax
這是一個快速和不簡潔方式來進行AJAX調用。在前面的官方React教程中，他們使用jQuery從服務器獲取數據。如果您剛剛開始使用React，可以為您節省大量時間。我們中的許多人已經熟悉jQuery。因此，在React中理解和使用它並不需要太多時間。下面是使用jQuery進行簡單的API調用的過程：
loadCommentsFromServer: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data}); // Notice this
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
}PS片段來自React的前官方教程。
這是在$.ajaxReact組件中使用的舊jQuery 。注意this.setState()在success回調中如何調用。這是如何使用從API調用獲得的數據更新狀態。
然而，jQuery是一個具有許多功能的大型庫 – 因此，僅僅為了進行API調用而使用它是沒有意義的（除非您已經將它用於其他一些任務）。那麼，有什麼選擇？我們應該使用什麼？答案是fetchAPI。
Fetch API
Fetch是一種新的，簡單和標準化的API，旨在統一在Web上提取和替換XMLHttpRequest。它有一個舊版瀏覽器的polyfill，應該在現代web應用中使用。Fetch API提供了一個JavaScript接口，用於訪問和操縱HTTP管道的部分，例如請求和響應。 它還提供了一個全局fetch()方法，該方法提供了一種簡單，合乎邏輯的方式來跨網絡異步獲取資源。
以下是修改後的API調用的內容：
loadCommentsFromServer: function() {
fetch(this.props.url).then(function(response){
// perform setState here
});
}在大多數現代React教程中，您會發現fetch常被應用在其中。要了解更多信息fetch，請查看以連結：
Superagent
Superagent是為了更好的可讀性和靈活性而創建的輕量級AJAX API庫。如果由於某種原因，你不想使用fetch，你一定要檢查一下。下面是一個演示其用法的片段：
loadCommentsFromServer: function() {
request.get(this.props.url).end(function(err,res){
// perform setState here
});
}Superagent也有一個具有相同API的Node.js模塊。如果您使用Node.js和React構建同構應用程序，則可以superagent使用諸如webpack之類的東西進行捆綁，並使其在客戶端可用。由於客戶端和服務器的API是相同的，為了使其在瀏覽器中工作，不需要更改代碼。
Axios
Axios是Node.js和瀏覽器的基於promise的HTTP客戶端。像fetch和superagent，它可以在客戶端和服務器上運行。它有許多其他有用的功能，你可以在他們的GitHub頁面上找到它。
axios是一個ajax的封裝，是vue.js2.0之後官方推薦的ajax插件，相對於之前官方推薦的vue-resource，axios有著更大的適用性，不僅可以使用在客戶端，也可以使用在伺服器端，也擁有更加簡單實用的api
以下是您如何使用Axios進行API調用：
loadCommentsFromServer: function() {
axios.get(this.props.url).then(function(response){
// perform setState here
}).catch(function(error){
//Some error occurred
});
}Request
如果沒有設計簡單的request庫，這個列表將是不完整的。有了更多的12k GitHub星星，它也是最受歡迎的Node.js模塊之一。你可以request在他們的GitHub頁面上找到關於模塊的更多信息。
示例用法：
loadCommentsFromServer: function() {
request(this.props.url, function(err, response, body){
// perform setState here
});
}My Take
由於fetch新的標準化API與遠程資源進行交互，我建議將其用於所有AJAX需求（不僅在React中，而且在所有類型的JavaScript應用程序中）。