Tengo una página de administración con varios botones que hacen llamadas axios para cambiar el contenido. Cada botón hace una llamada diferente.

Cuando el usuario hace clic en el botón 1, los datos se recuperan del servidor para mostrarlos en pantalla. Pero si el usuario hace clic en el botón 1, luego en el 2 en rápida sucesión, la interfaz de usuario muestra los datos del 1 y luego del 2.

Esto no es necesariamente un gran problema, pero me gustaría conocer el mejor enfoque, ya que me causa problemas al animar los datos con gsap (ver más abajo).

¿Es el mejor enfoque para probar y usar tokens para cancelar la solicitud de axios?

Codepen: ejemplo sin animación Un ejemplo ligeramente diferente con animación

JS

 document.body.addEventListener('click', async e => { const item1 = e.target.closest('.item1'); const item2 = e.target.closest('.item2'); const item3 = e.target.closest('.item3'); if(item1) { await dummyAsync(); changeContent(1); } if(item2) { await dummyAsync(); changeContent(2); } if(item3) { await dummyAsync(); changeContent(3); } }); function dummyAsync() { return new Promise((resolve, reject) => { setTimeout(() => resolve(), 2000); }); } function changeContent(item) { // Clear previous content const wrapper = document.querySelector('.content-wrapper'); while(wrapper.firstChild) wrapper.removeChild(wrapper.firstChild); const dummyTable = `<div class="table">This is table number: ${item}</div>`; // Add table wrapper.insertAdjacentHTML('afterbegin', dummyTable); };

HTML y CSS

 <div class="menu"> <div class="item item1">Item1</div> <div class="item item2">Item2</div> <div class="item item3">Item3</div> </div> <div class="content-wrapper"> <div class="content">Content</div> </div> .menu { display: flex; justify-content: space-evenly; width: 20rem; border: 1px solid lightgrey; } .item { cursor: pointer; padding: 1rem; z-index: 2; } .content-wrapper { display: flex; justify-content: center; align-items: center; margin-top: 2rem; border: 1px solid lightgrey; height: 20rem; } .table { display: flex; justify-content: center; align-items: center; width: 25rem; height: 10rem; border: 1px dotted grey; }