使用 React 处理 ajax

Question

我应该如何在相当传统的 Web 应用程序中处理 ajax 请求？特别是将 React 用于视图，同时拥有处理文本等数据的后端，但使用 ajax 自动保存用户交互，例如切换选项或喜欢 post 到服务器。

我应该只使用 jQuery 吗，还是像 Backbone 这样的东西会更有用？

Answer 1

以防万一有人无意中发现了这个并且不知道，jQuery 使发送 AJAX 呼叫变得非常容易。由于 React 只是 JavaScript，它将像任何其他 jQuery AJAX 调用一样工作。

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)
    });
  },

Answer 2

我不会使用 JQuery，因为 AJAX 调用实际上并不那么复杂并且 JQuery 是一个相当大的依赖项。请参阅 vanillajs 关于在没有库的情况下进行 AJAX 调用的注释：http://vanilla-js.com/

Answer 3

您可以使用 JavaScript Fetch API，它也支持 GET 和 POST，而且它具有构建承诺。

fetch('/api/getSomething').then(function() {...})

Answer 4

请在 https://github.com/facebook/react/wiki/Complementary-Tools

查看有关 Complementary Tools 的 Facebook 官方文档

他们只是推荐很少的数据获取 API 之类的

axios: 用于浏览器和 node.js.
jQuery AJAX: 无需介绍。
superagent: 用于 AJAX 请求的轻量级 "isomorphic" 库。
reqwest: AJAX 再来一遍。包括对 xmlHttpRequest、JSONP、CORS 和 CommonJS Promises A 的支持。浏览器支持可追溯到 IE6。

我个人最喜欢的是 axios，因为 promises 在浏览器和 nodejs env 中都有效，甚至正式的 reactJS 网站也推荐在 AJAX and APIs

Answer 5

我绝对建议您使用 Fetch API。非常容易理解，支持所有方法，你可以使用async/await代替promise/then并回调地狱。

例如：

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
})

更好的方式或async/await方式：

(async function fetchAsync () {
    let data = await (await fetch(`https://httpbin.org/get`,{
                                method: `GET`,
                                headers: {
                                    'authorization': 'BaseAuth W1lcmxsa='
                                }
                            })).json();
                      console.log(data);
})();

使用 React 处理 ajax

Handling ajax with React

ajax

jquery

backbone.js

reactjs