Avoid potential issues caused by cancelled asynchronous requests affecting the application's status by using the watchEffect() function

Question

Avoid potential issues caused by cancelled asynchronous requests affecting the application's status by using the watchEffect() function

Imagine a scenario where a component receives the ID of a resource through a prop called resourceId. This component is responsible for fetching the corresponding resource from an API and displaying it, while also managing loading and error states (similar to the pattern outlined here).

The function that retrieves the resource from the external API includes an abort function which, when invoked, immediately rejects the request. If the value of resourceId changes during an ongoing request, the existing request should be aborted in favor of initiating a new one. Just to provide some context, this implementation involves using fetch() and AbortController.

Utilizing Vue 3 with the composition API, I developed an implementation that resembles the following:

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>

Although this approach generally works well, issues arise when dealing with cancellations. If a change in resourceId occurs before the completion of the last API request, the following sequence of events takes place:

abort() is triggered
The watchEffect callback is executed, setting values for loading, error, and data
The catch and finally blocks from the initial request run, affecting loading and error
The second API request finishes and updates loading and data

This leads to an unexpected state where loading is set to false while the second request is still ongoing, error contains the exception raised by aborting the first request, and data holds the value from the second request.

Are there any recommended design patterns or solutions to address this issue?

javascript vue.js vuejs3 fetch-api vue-composition-api

Answer 1

Answer №1

if the sequence of events unfolds as you've outlined:

start with watchEffect
abort
move to the second watchEffect
deal with catch and finally from the initial watchEffect

You can maintain a counter that tracks the current ongoing request (effectively acting as a request id or version, as some frameworks may refer to it). Increment the counter each time watchEffect is triggered and take note of the current value. Within your catch and finally block, verify if the current counter matches the initial counter value. If they don't match, it indicates handling outdated request errors, allowing you to skip error modification and loading status updates.

const {ref, watchEffect} = Vue;

const App = {
  setup() {
    const resourceId = ref(0);
    const loading = ref(false);
    const data = ref(null);
    const error = ref(null);

    // simulate an asynchronous API fetch method that returns 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>

Answer 2

if the sequence of events unfolds as you've outlined:

start with watchEffect
abort
move to the second watchEffect
deal with catch and finally from the initial watchEffect

You can maintain a counter that tracks the current ongoing request (effectively acting as a request id or version, as some frameworks may refer to it). Increment the counter each time watchEffect is triggered and take note of the current value. Within your catch and finally block, verify if the current counter matches the initial counter value. If they don't match, it indicates handling outdated request errors, allowing you to skip error modification and loading status updates.

const {ref, watchEffect} = Vue;

const App = {
  setup() {
    const resourceId = ref(0);
    const loading = ref(false);
    const data = ref(null);
    const error = ref(null);

    // simulate an asynchronous API fetch method that returns 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>

Avoid potential issues caused by cancelled asynchronous requests affecting the application's status by using the watchEffect() function

Answer №1

Similar questions

"Utilize the on() method to bind a click event to dynamically generated elements received

Should you include the dollar sign in a Vue HTML variable or not?

Ways to conceal an animated gif once it has been downloaded?

Utilizing a promise instead of making a jQuery ajax request

Verification response parameter not received from Google Authentication Express

Adaptive Container with Images that are not stretched to full width

Reviewing user input for any inappropriate characters using jQuery's functionality

Creating a personalized scrollball feature within a fancybox

Exploring effective testing approaches for C++ plugins in Node.js

"Designing with Vue.js for a seamless and adaptive user experience

Forward to a SubDomain

Retrieving External JSON Data from a Server with Firefox

Initiate monitoring for child component modifications

Comparing JSON Objects in Javascript

Unable to redirect page in Codeigniter after submitting button

Creating HTML form input fields for reading and writing an XML file

Tips for adding React components to an array with the help of backticks

Tips for avoiding flickering in a background image when it is being changed

Pass an array using AJAX to my Python function within a Django framework

Improved AJAX Dependency