用React处理ajax

use*_*241 32 ajax jquery backbone.js reactjs

我应该如何在相当传统的Web应用程序中处理ajax请求?特别是使用React进行视图,同时使用后端处理文本等数据,但是使用ajax自动保存用户交互,例如切换选项或将帖子贴到服务器上.

我应该只使用jQuery,还是像Backbone这样的东西会更有益?

Pyt*_*eat 43

为了防止任何人偶然发现这个并且不知道,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)
    });
  },
Run Code Online (Sandbox Code Playgroud)

  • 这是一个巨大的库,只是为了一个AJAX包装器.他们可以下载的压缩版2.x是82 KB.对于一个包装器来说,这可能是很多,可能只需要很少的代码就可以在屏幕上显示. (15认同)
  • 是的你是对的,但除了Ajax调用之外,还有很多我使用jQuery.使用React下载它是一件痛苦的事,但是jQuery对我来说完全没有帮助. (3认同)
  • 你可以添加jQuery的ajax部分:http://stackoverflow.com/questions/4132163/is-there-only-ajax-part-of-jquery (3认同)
  • 我得到了$未定义 (3认同)
  • 关于jquery巨大的话题:替代品包括superagent和reqwest.两者都有非常相似的API,但相比之下,superagent只有10kB. (2认同)

Moh*_*rif 17

Complementary Tools访问https://github.com/facebook/react/wiki/Complementary-Tools查看Facebook的官方文档.

他们只是推荐几个获取API的数据

  • axios:基于Promise的HTTP客户端,用于浏览器和node.js.
  • jQuery AJAX:不需要介绍.
  • superagent:用于AJAX请求的轻量级"同构"库.
  • reqwest: AJAX一遍又一遍.包括对xmlHttpRequest,JSONP,CORS和CommonJS Promises A的支持.浏览器支持可以追溯到IE6.

我个人最喜欢的是axios由于承诺在浏览器和nodejs env中工作,甚至官方反应JS网站在AJAX和API上推荐相同的


Ale*_*yuv 13

你可以使用JavaScript Fetch API,它也支持GET和POST,还有bilding Promises.

fetch('/api/getSomething').then(function() {...})
Run Code Online (Sandbox Code Playgroud)

  • 你如何处理取消飞行中的请求? (2认同)
  • 如果你现在使用React,你可能(应该)使用Babel,所以这样取得很好. (2认同)

Emi*_*lev 8

我不会使用JQuery,因为AJAX调用实际上并不复杂,而JQuery是一个非常大的依赖.有关没有库的AJAX调用,请参阅vanillajs的说明:http://vanilla-js.com/