react ajax开发可以用：1、jQuery的“$.ajax”方法；2、Fetch API；3、SuperAgent，它是一个轻量级的AJAX API库；4、Axios库，主要是用于向后台发起请求的；5、Request库。
本教程操作环境：Windows7系统、react17.0.1版、Dell G3电脑。
React AJAX 请求的5种方案
1、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。
2、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 的情况，可参考下列链接（全英文）：
MozillaDavid Walsh BlogGoogle DevelopersWHATWG
3、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 版本不需要修改任何代码就可以在浏览器上运行。
4、Axios
https://github.com/axios/axios
Axios 是一个基于 promise 对象（Benz 乱入：这个链接也是我加的）的 HTTP 客户端；axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。。与 fetch 和 superagent 一样，它同时支持浏览器端和 Node.js 端。另外你可以在其 Github 主页上发现，它有很多很实用的高级功能。
这是 Axios 的大概用法：
loadCommentsFromServer: function() { axios.get(this.props.url).then(function(response){ // 在这儿实现 setState }).catch(function(error){ // 处理请求出错的情况 });}
登录后复制
5、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 });}
登录后复制
【相关推荐：Redis视频教程】
以上就是react ajax开发用什么的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2935603.html
