Digamos que tenemos un componente que recibe la ID de un recurso a través de una propiedad, resourceId . El componente debe obtener el recurso correspondiente de una API y mostrarlo, al mismo tiempo que maneja los estados de carga/error (siguiendo un patrón similar a este ).
La función que obtiene el recurso de la API externa también devuelve una función de abort que, si se llama, hace que la solicitud se rechace de inmediato. Cuando cambia resourceId , cualquier solicitud en curso debe cancelarse a favor de una nueva solicitud. Por lo que vale, estoy usando fetch() y AbortController para esto.
Usando Vue 3 con la API de composición, se me ocurrió una implementación que se ve así:
const loading = ref(false); const data = ref(null); const error = ref(null); watchEffect(async (onCancel) => { loading.value = true; data.value = error.value = null; const { response, abort } = fetchResourceFromApi(props.resourceId); onCancel(abort); try { data.value = await (await response).json(); } catch (e) { error.value = e; } finally { loading.value = false; } }); <div v-if="loading">Loading...</div> <div v-else-if="error">Error: {{ error }}</div> <div v-else>{{ data }}</div> Esto funciona bien en la mayoría de las circunstancias, pero se rompe cada vez que entra en juego la cancelación. Si resourceId cambia antes de que finalice la última solicitud de API, ocurre el siguiente orden de eventos:
abort() se llamawatchEffect , configurando la loading , error y datacatch y finally se llaman los bloques de la solicitud original, configurando la loading y errorloading y data Esto da como resultado un estado inesperado en el que la loading se establece en false mientras la segunda solicitud está en curso, el error contiene la excepción generada al cancelar la primera solicitud y data contienen el valor de la segunda solicitud.
¿Existen patrones de diseño o soluciones alternativas que puedan solucionar este problema?
si la secuencia de eventos es como usted describe:
watchEffectabortwatchEffectwatchEffect Luego, puede mantener un contador y usarlo para rastrear cuál es la solicitud actual en vuelo (efectivamente, es una identificación de solicitud o versión, como lo llaman algunas bibliotecas). Cada vez que se llama watchEffect , aumente el contador y tome una instantánea del valor actual. Verifique su captura y finalmente bloquee si el contador actual es el mismo que el valor del contador con el que comenzó. En caso de que no coincidan, significa que está manejando errores de solicitud obsoletos para que pueda omitir la modificación del error y el estado de carga.
const {ref, watchEffect} = Vue; const App = { setup() { const resourceId = ref(0); const loading = ref(false); const data = ref(null); const error = ref(null); // fake an api fetch method to asynchronously return // a result after 3 seconds. const fetchFor = (id) => { let abort; const response = new Promise((resolve, reject) => { abort = () => reject(`request ${id} aborted`); setTimeout(() => resolve({msg: "result for " + id}), 3000); }); return {response, abort}; }; let version = 0; watchEffect(async (onCancel) => { version ++; const currentVersion = version; loading.value = true; data.value = error.value = null; const { response, abort } = fetchFor(resourceId.value); onCancel(abort); try { data.value = await response; } catch (e) { if (currentVersion === version) { error.value = e; } } finally { if (currentVersion === version) { loading.value = false; } } }); return {resourceId, loading, data, error}; } }; const app = Vue.createApp(App); app.mount("#app"); <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="app"> <button @click="resourceId++">Request</button> <div> last request is {{resourceId}} </div> <div> loading = {{loading}} </div> <div> data = {{data?.msg}} </div> <div> error = {{error}} </div> </div>