Gestione di ajax con React

Question

Come devo gestire le richieste ajax in un'applicazione web abbastanza tradizionale? In particolare con l'utilizzo di React per le visualizzazioni, pur avendo un back-end che gestisce dati come il testo e cosa no, ma usando ajax per salvare automaticamente le interazioni dell'utente come ad esempio la commutazione delle opzioni o il gradimento di un post sul server.

Devo usare solo jQuery per questo, o qualcosa di simile a Backbone può essere più vantaggioso?

Answer 1

Nel caso in cui qualcuno si sia imbattuto in questo e non lo sappia, jQuery rende super facile inviare chiamate AJAX. Poiché React è solo JavaScript, funzionerà come qualsiasi altra chiamata jQuery AJAX.

La documentazione di React utilizza jQuery per effettuare la chiamata AJAX, quindi presumo che sia sufficiente per la maggior parte degli scopi, indipendentemente dallo stack.

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

non vorrei usare JQuery, dal momento che le chiamate AJAX è in realtà non è quel complesso e JQuery è una abbastanza grande dipendenza. Vedere la nota di vanillajs su come effettuare chiamate AJAX senza librerie: http://vanilla-js.com/

Answer 3

È possibile utilizzare JavaScript API di recupero, supporta anche GET e POST, oltre a promemoria di bilding.

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

Answer 4

Gentilmente checkout la documentazione ufficiale di Facebook su Complementary Tools a https://github.com/facebook/react/wiki/Complementary-Tools

Essi si limita a raccomandare pochi dati recupero API come

• superagent: Un leggero libreria "isomorfe" per le richieste AJAX.
• reqwest: AJAX tutto da capo. Include il supporto per xmlHttpRequest, JSONP, CORS e CommonJS Promises A. Il supporto del browser torna a IE6.
• react-ajax: Componente richiesta Ajax per React.
• axios: Client HTTP basato su promessa per il browser e node.js.

Il mio preferito personale sarebbe axios a causa di promesse che funziona nel browser come pure enj dei nodi.

Answer 5

Io sicuramente ti offro per usare Fetch API. È molto semplice da capire, supporta tutti i metodi ed è possibile utilizzare async/await anziché promise/then e richiamare l'inferno.

Ad esempio:

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

In modo migliore o async/await modo:

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