Vue single page application, the memory problem caused by the change of the page caused by the jump of the route?

in a single page application, the async method is executed in the page vue component. There are many promise, in this method. If you exit the page now, because these promise will manipulate the data of vuex, how to interrupt this async method to prevent it from affecting the vuex?

Javascript
Apr.27,2021 
let isLeave = false
function wrapWithCancel(fn) {
    return data => {
      if (!isLeave) {
        return fn(data);
      }
    }
 }


beforeRouteLeave (to, from, next) {
    isLeave  = true
},
methods: {
    async m1() {
            
            
          const data = await wrapWithCancel(fetchData)();
          const userData = await wrapWithCancel(updateUserData)(data);
          const userAddress = await wrapWithCancel(updateUserAddress)(userData);
          const marketingData = await wrapWithCancel(updateMarketingData)(userAddress);
    }
}

if the async method in the component you are referring to is an asynchronous request, you can execute cancel request

your page is closed and the code is not executed. How can it affect

there is something wrong with the title statement. You should be referring to the "exit page" caused by the routing change, rather than "closing the browser page", right?

there can be multiple asynchronous operations in an asynchronous function, one of which is difficult to cancel, because it's not easy to know where you are now. There are several solutions I can think of:

  1. beforeDestroy add a tag, check this tag before each step is executed asynchronously, and stop if it has been modified
  2. manages multiple asynchronous operations using queues, and sets a tag to the queue
  3. Asynchronous functions are all bound to the current instance, and check the this.$el.parentNode of the current instance.

Previous: Mongoose multi-table query problem

Next: How to do the effect that can be poked around by sliding?

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu