Digamos que esto es lo que tenemos:
onClick={() => restrictOrders()}>y esta es nuestra función asíncrona
const restrictOrders = async () => { try { const result = await axios.post(`${config.dev_server}/something`); }catch(e){} }¿Necesito cambiar el onClick a
onClick={async() => await restrictOrders()}>el resultado es el mismo, lo he probado tanto en producción como en local, con alta y baja velocidad de internet, agregado largos tiempos de espera en el servidor y en todos los casos parece estar esperando la respuesta.
Respuesta corta: no, no hace ninguna diferencia.
En general, await básicamente significa "esperar a que se resuelva esta Promesa antes de continuar con el resto del código". Pero esto significa que una await antes de la declaración final de una función no tiene ningún efecto, porque no hay nada que deba suceder después de la "espera".
Como una simple ilustración:
const sleep = (delay) => new Promise(resolve => setTimeout(resolve, delay)); const myFunction = async () => { console.log("before"); await sleep(2000); console.log("after"); }; myFunction();y, como sin duda esperaría, hay un retraso de 2 segundos entre el "antes" y el "después".
Pero si no le importó el "después", entonces no necesita la await en absoluto:
const sleep = (delay) => new Promise(resolve => setTimeout(resolve, delay)); const myFunction = async () => { console.log("before"); sleep(2000); }; myFunction(); Podría usar await aquí, y tal vez sea una mejor práctica en caso de que luego desee agregar algo después, pero no hay absolutamente ninguna necesidad de hacerlo. (En este caso trivial, por supuesto, no es necesario tener la llamada de sleep , pero imagine que es una función "real" con un efecto secundario, como publicar en una API).
Es lo mismo con tu ejemplo de React:
onClick={async() => await restrictOrders()}> está await la última (y en este caso, la única) sentencia de una función anónima. Dado que no hay nada que hacer después que deba esperar, no hay nada de malo en no tener la await allí, por lo que lo más común es que no se haga, supongo que para que la expresión de la función en línea sea menos detallada.
Lo que se ha observado (por mí) en algunas de las aplicaciones es esto:
Las acciones realizadas por el usuario (como hacer clic en un botón) dan como resultado la actualización del estado. Entonces, en este caso, si tenemos una variable de estado como esta:
const [ordersRestricted, setOrdersRestricted] = useState(0);entonces, el controlador de clics es así:
onClick={() => setOrdersRestricted(prev => (prev + 1))}>En consecuencia, el efecto correspondiente (o efecto secundario) de la acción se maneja así:
useEffect(() => { const restrictOrders = async () => { try { const result = await axios.post(`${config.dev_server}/something`); // do something with the result // typically, update the state (but take care to not change // dependencies, that may lead to infinite looping) } catch(e){} }; restrictOrders(); }, [ordersRestricted]);