jQuery 使用 React 处理 ajax
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29990809/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Handling ajax with React
提问by user2442241
How should I handle ajax requests in a fairly traditional web application? Specifically with using React for views, while having a backend that handles data such as text and what not, but using ajax to automatically save user interactions such as toggling options or liking a post to the server.
我应该如何在相当传统的 Web 应用程序中处理 ajax 请求？特别是使用 React 进行视图，同时具有处理文本等数据的后端，但使用 ajax 自动保存用户交互，例如切换选项或喜欢帖子到服务器。
Should I just use jQuery for this, or would something like Backbone be more beneficial?
我应该为此使用jQuery，还是像Backbone这样的东西更有益？
回答by PythonIsGreat
Just in case anybody stumbled upon this and does not know, jQuery makes it super easy to send AJAX calls. Since React is just JavaScript it will work just like any other jQuery AJAX call.
以防万一有人偶然发现并且不知道，jQuery 使发送 AJAX 调用变得非常容易。由于 React 只是 JavaScript，它会像任何其他 jQuery AJAX 调用一样工作。
React's own documentation uses jQuery to make the AJAX call so I assume that's good enough for most purposes regardless or stack.
React 自己的文档使用 jQuery 进行 AJAX 调用，所以我认为这对于大多数用途来说已经足够了，无论是堆栈还是堆栈。
componentDidMount: 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)
});
},
回答by Mohammad Arif
Kindly checkout the official documentation of Facebook about Complementary Toolsat https://github.com/facebook/react/wiki/Complementary-Tools
请Complementary Tools在https://github.com/facebook/react/wiki/Complementary-Tools查看 Facebook 的官方文档
They simply recommends few data fetching API's like
他们只是推荐一些数据获取 API 之类的
- axios:Promise based HTTP client for the browser and node.js.
- jQuery AJAX:No introduction needed.
- superagent:A lightweight "isomorphic" library for AJAX requests.
- reqwest:AJAX all over again. Includes support for xmlHttpRequest, JSONP, CORS, and CommonJS Promises A. Browser support stretches back to IE6.
- axios：用于浏览器和 node.js 的基于 Promise 的 HTTP 客户端。
- jQuery AJAX：无需介绍。
- superagent：用于 AJAX 请求的轻量级“同构”库。
- reqwest:AJAX 重来一遍。包括对 xmlHttpRequest、JSONP、CORS 和 CommonJS Promises 的支持 A. 浏览器支持可追溯到 IE6。
My personal favorite would be axiosdue to promises which works in browser as well as in nodejs env and even officially reactJS website recommend the same at AJAX and APIs
我个人最喜欢的axios原因是 promises 可以在浏览器和 nodejs 环境中使用，甚至官方 reactJS 网站也推荐在AJAX 和 APIs 中使用相同的内容
回答by Alex Ivasyuv
You can use JavaScript Fetch API, it supports GET and POST as well, plus it has building Promises.
你可以使用 JavaScript Fetch API，它也支持 GET 和 POST，而且它有构建 Promises。
fetch('/api/getSomething').then(function() {...})
回答by Emil Ingerslev
I would not use JQuery, since AJAX calls is actually not that complex and JQuery is a pretty big dependency. See vanillajs' note on doing AJAX calls without libraries: http://vanilla-js.com/
我不会使用 JQuery，因为 AJAX 调用实际上并没有那么复杂，而且 JQuery 是一个非常大的依赖项。请参阅 vanillajs 关于在没有库的情况下进行 AJAX 调用的说明：http://vanilla-js.com/
回答by AmerllicA
I definitely proffer you to use Fetch API. It is very simple to understand, supports all methods and you can use async/awaitinstead of promise/thenand call back hell.
我绝对建议您使用Fetch API. 它非常易于理解，支持所有方法，您可以使用async/await代替promise/then和回调地狱。
For example:
例如：
fetch(`https://httpbin.org/get`,{
method: `GET`,
headers: {
'authorization': 'BaseAuth W1lcmxsa='
}
}).then((res)=>{
if(res.ok) {
return res.json();
}
}).then((res)=>{
console.log(res); // It is like final answer of XHR or jQuery Ajax
})
In better way or async/awaitway:
以更好的方式或async/await方式：
(async function fetchAsync () {
let data = await (await fetch(`https://httpbin.org/get`,{
method: `GET`,
headers: {
'authorization': 'BaseAuth W1lcmxsa='
}
})).json();
console.log(data);
})();
