backbone.js 使用React处理 AJAX

dfuffjeb  于 2022-11-10  发布在  React
关注(0)|答案(5)|浏览(164)

在一个相当传统的Web应用程序中,我应该如何处理 AJAX 请求?特别是使用React来处理视图,同时有一个后端来处理文本等数据,但使用ajax来自动保存用户交互,如切换选项或喜欢服务器上的帖子。
我应该只使用jQuery来完成这个任务,还是像Backbone这样的东西更有用?

neekobn8

neekobn81#

如果有人无意中发现了这一点,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)
    });
  },
zengzsys

zengzsys2#

请在https://github.com/facebook/react/wiki/Complementary-Tools上查看Facebook关于Complementary Tools的官方文档
他们只是简单地推荐了一些数据获取API,比如

***axios:**用于浏览器和node.js的基于Promise的HTTP客户端。
***jQuery AJAX:**不需要介绍。
***superagent:**一个轻量级的“同构”库,用于 AJAX 请求。
***reqwest:**AJAX 的全部内容。包括对xmlHttpRequest、JSONP、CORS和CommonJS的支持。浏览器支持可以追溯到IE6。

我个人最喜欢的是axios,因为它可以在浏览器和节点环境中工作,甚至可以在官方reactJS网站上推荐**AJAX and APIs**

col17t5w

col17t5w3#

您可以使用JavaScript Fetch API,它也支持GET和POST,另外它还具有构建承诺。

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

ui7jx7zq4#

我不会使用JQuery,因为 AJAX 调用实际上并不复杂,而且JQuery是一个相当大的依赖项。请参见vanillajs关于不使用库进行AJAX调用的注解:http://vanilla-js.com/

eimct9ow

eimct9ow5#

我肯定会提供给你使用Fetch API。它非常简单易懂,支持所有方法,你可以使用async/await而不是promise/then,然后回叫hell。
例如:

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

相关问题