React.js Callback-Funktion nach Ausführung der ersten Funktion gesetzt

Question

Ich habe eine API on onClick-Ereignis meiner React.js/Redux App aufgerufen. Nach dem Aufruf der API muss ich eine andere API aufrufen, basierend auf den Ergebnissen der ersten API. Also habe ich über asynchrone Anrufe nachgedacht.

Mein Code:

<a href="" onClick={(e) => this.sendData(e)} >Send</a> 

und Methode senddata ist

sendData(e){ 
    e.preventDefault(); 
    this.props.sendDataApi({this.refs.msg.value}); 
    //After receiving results from above api, i have to call another api async 
    this.props.getDetails(this.refs.txt.value); 
} 

Aber beide APIs zugleich genannt currenlty. Irgendeine Hilfe!

Answer 1

Sie sollten async/await-Muster verwenden, das dieses Szenario gut verarbeitet. Ihr Code würde dann so aussehen:

const sendData = async message => { 
    const messageId = await sendDataApi(message) 
    const details = await getDetails(messageId) 
    return details 
} 

Wenn Sie jedoch nicht in der Lage sind neueste Sprachfunktionen nutzen zu können, Promise s verwenden. Denken Sie daran, dass der Code anfälliger für Callback-Höllen ist und dass sie möglicherweise auch Polyfilling benötigen.

Der gleiche Code mit dem Versprechen würde wie folgt aussehen:

const sendData = message => { 
    sendDataApi(message) 
    .then(messageId => getDetails(messageId)) 
} 

Dieser Code nur ein Beispiel für die Probleme mit dem Versprechen, weil es einfach zu sendDataApi(message).then(getDetails) reduziert werden kann. Probleme treten auf, wenn komplexe Bedingungslogik, Fehlerbehandlung, mehr Tasks und Parameterübergabe vorhanden sind.

React behandelt Asynchronität sehr schlecht, also Redux. Sie müssen redux-thunk, redux-saga oder eine andere Middleware verwenden. Damit können Sie eine weitere Aktion vom Aktionsersteller versenden (continuation, trunk, saga - Sie nennen es). Es kann mühsam werden, viel Vortex erfordern und sehr schwierig zu debuggen sein. Sie könnten darüber nachdenken, Reduxs synchrone Statusverwaltung zu verlassen und andere Lösungen (RxJS vielleicht?) Für diese Art von Problemen in Erwägung zu ziehen.

Bitte see an example of using Promises to chain two asynchronous calls mit Reacts Standard setState (siehe Konsolenausgabe).

Mit redux-thunk die Umsetzung könnte wie folgt aussehen (andere Aktionen nicht zeigen, keine Fehlerbehandlung etc.):

... 

const sendData = message => { 
    return dispatch => { 
    return sendDataApi(message).then(
     messageId => dispatch(getDetails(messageId)), 
    ); 
    }; 
}