jquery - update - Manejo de ajax con React

login ajax django

Question

¿Cómo debo manejar las solicitudes ajax en una aplicación web bastante tradicional? Específicamente con el uso de React para vistas, mientras que tiene un backend que maneja datos como texto y lo que no, pero usa ajax para guardar automáticamente las interacciones del usuario, como opciones de alternar o que le guste una publicación en el servidor.

¿Debería usar jQuery para esto, o algo como Backbone sería más beneficioso?

Answer 1

Definitivamente te propongo que uses Fetch API . Es muy simple de entender, admite todos los métodos y puede usar async/await lugar de promise/then y call back hell.

Por ejemplo:

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

De la mejor manera o modo async/await :

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

Answer 2

En caso de que alguien se topara con esto y no lo sepa, jQuery hace que sea muy fácil enviar llamadas AJAX. Dado que React es solo JavaScript, funcionará como cualquier otra llamada jQuery AJAX.

La documentación de React usa jQuery para hacer la llamada AJAX, así que supongo que es lo suficientemente bueno para la mayoría de los propósitos, independientemente de si está en la pila.

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 3

No usaría JQuery, ya que las llamadas AJAX en realidad no son tan complejas y JQuery es una gran dependencia. Consulte la nota de vanillajs sobre cómo hacer llamadas AJAX sin bibliotecas: http://vanilla-js.com/

Answer 4

Puede utilizar JavaScript Fetch API, admite GET y POST también, además de tener promesas de bilding.

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

Answer 5

Sírvase consultar la documentación oficial de Facebook sobre las Complementary Tools en https://github.com/facebook/react/wiki/Complementary-Tools

Simplemente recomiendan pocos API de obtención de datos como

• axios : cliente HTTP basado en Promesa para el navegador y node.js.
• jQuery AJAX : No se necesita presentación.
• superagent : una biblioteca liviana "isomorfa" para solicitudes AJAX.
• reqwest : AJAX de nuevo. Incluye soporte para xmlHttpRequest, JSONP, CORS y CommonJS Promises A. El soporte del navegador se extiende de nuevo a IE6.

Mi favorito personal sería axios debido a las promesas que funciona tanto en el navegador como en nodejs env e incluso oficialmente. El sitio web de JS recomienda lo mismo en AJAX y API.