用React处理ajax

Posted 2021-05-05

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

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

答案

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

另一答案

请在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 and APIs

另一答案

您可以使用JavaScript Fetch API，它也支持GET和POST，还有构建Promise。

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

另一答案

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

另一答案

我绝对会让你使用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);
})();