React AJAX 請求的5種方案

這是乙個快速又粗暴的方案。在舊版本的官方 react 教程（official react tutorial）中，他們使用了 jquery$.ajax來示範如何從伺服器獲取資料。如果你是剛剛開始學習和把玩 react，jquery 可以節省你大量入門和開發的時間，因為我們都對 jquery 非常熟悉了。這是 jquery 實現 ajax 的例子：

loadcommentsfromserver: function() );   // 注意這裡
}.bind(this),
error: function(xhr, status, err) .bind(this)
});}

p.s. 這**段摘自舊版本的官方教程

這裡演示了如何在乙個 react 元件裡面使用 jquery 的$.ajax。唯一需要注意的是如何在success**裡面呼叫this.setstate()，即當 jquery 成功收到資料之後應該如何通過 react 的 api 更新 state 的。

然而，jquery 是乙個包含很多功能的大頭兒，只為了用一下 ajax 功能而引入整個 jquery 是沒有意義的（除非你還使用 jquery 做了很多別的事情）。so，用什麼才好？答案是fetchapi。

fetch是個新的、簡單的、標準化的api，旨在統一web通訊機制，並替代xmlhttprequest。它已經被主流瀏覽器所支援，針對較舊的瀏覽器也有了乙個 polyfill

（benz亂入：polyfill 直譯是填充工具，就是舊瀏覽器本來不支援某個新的js api，引入一段js**後就支援了，這一段js**給舊瀏覽器」填充「了乙個api。這個單詞我實在不知道怎麼翻譯，感覺反而保留原單詞不翻譯更能讓讀者理解。）。如果你在使用 node.js ，你也可以通過 node-fetch 來使 node.js 支援fetch。

若把上述用 jquery$.ajax的**段改成fetch實現的話，**應該長這樣子：

loadcommentsfromserver: function() );
}

superagent 是乙個輕量級的 ajax api 庫，為更好的可讀性和靈活性而生。如果某些原因讓你不太想用fetch，那麼 superagent 就幾乎是必然的選擇了。superagent 的用法大概是這樣的：

loadcommentsfromserver: function() );
}

superagent 也有 node.js 版本，api 是一樣的。如果你在用 node.js 和 react 開發同構應用

（benz 亂入：這個鏈結是我加的，旨在照顧初學者），你可以用 webpack 之類的東西嵌入superagent並讓它適用於瀏覽器端。因為瀏覽器端和伺服器端的 api 是一樣的，所以其 node.js 版本不需要修改任何**就可以在瀏覽器上執行。

axios 是乙個基於 promise 物件

（benz 亂入：這個鏈結也是我加的）的 http 客戶端。與fetch和superagent一樣，它同時支援瀏覽器端和 node.js 端。另外你可以在其 github 主頁上發現，它有很多很實用的高階功能。

這是 axios 的大概用法：

loadcommentsfromserver: function() ).catch(function(error));
}

用法示例：

loadcommentsfromserver: function() );
}

因為fetch是新的標準化的api，所以，在任何需要 ajax 的地方（不論在 react 裡或是其他所有 js 應用），我都更傾向於使用fetch。

**：

React AJAX 請求的5種方案

HTTP請求Content Type四種方式比較

HTTP協議以及HTTP請求中8種請求方法

php手記之02 tp5請求引數讀取三種方式

React AJAX 請求的5種方案

HTTP請求Content Type四種方式比較

HTTP協議以及HTTP請求中8種請求方法

php手記之02 tp5請求引數讀取三種方式

相關推薦