Create a delay effect in Vuex's action function

Question

Create a delay effect in Vuex's action function

I am currently developing a Vue application for the backend and I want to introduce an artificial delay to actions. For example, when I submit a sign in request, I would like to add a 1-second delay before redirecting to the main application.

This is the submit method within the component:

onSubmit() {
  this.loading = true;
  this.$store.dispatch('auth/signIn', this.credentials).then(() => {
    this.loading = false;
  });
}

Here is the signIn method from the action:

  async signIn({ commit }, credentials) {
    const result = await authService.signIn(credentials);
    await commit(AUTHENTICATE, {
      authenticated: result
    });
  }

However, I encountered an issue with the authService method as it returns undefined. Here's the block of code that is causing the problem:

  async signIn(credentials) {
    setTimeout(() => {
      console.log('credentials', credentials);
      return true;
    }, 2000);
  }

Could someone assist me in resolving this issue?

javascript vue.js vuex

Answer 1

Answer №1

I implemented a delay function using the code below. For more details, please refer to the main.js file at

customSleep(delay) {
        return new Promise(resolve => setTimeout(resolve, delay));
  }

Answer 2

I implemented a delay function using the code below. For more details, please refer to the main.js file at

customSleep(delay) {
        return new Promise(resolve => setTimeout(resolve, delay));
  }

Answer 3

Answer №2

Your signIn method does not return anything and setTimeout does not halt the code execution.

For a blocking timeout, I recommend creating a delay() function like this:

function delay(time = 2500) {
  return new Promise((resolve) => {
    setTimeout(resolve, time)
  })
}

By default, it will wait for 2.5 seconds.

You can view a live example in vanilla JS here

Answer 4

Your signIn method does not return anything and setTimeout does not halt the code execution.

For a blocking timeout, I recommend creating a delay() function like this:

function delay(time = 2500) {
  return new Promise((resolve) => {
    setTimeout(resolve, time)
  })
}

By default, it will wait for 2.5 seconds.

You can view a live example in vanilla JS here

Create a delay effect in Vuex's action function

Answer №1

Answer №2

Similar questions

Navigating multi-level drop-down menus on touch devices can be tricky, but there are ways to effectively

The website code lacks a dynamically generated <div> element

Encountering the error message "{error: 'Operation `users.findOne()` buffering timed out after 10000ms'}" while trying to access my app on localhost

Adjust the text color based on the background image or color

Utilizing dual identifiers in a Jquery plugin

What could be causing the HTML page to scroll up when the datepicker is initialized in JavaScript?

Encountered an Error While Compiling GeoJson File in Vue

Filtering an Array of Objects on the Fly in Vue.js

How can we display a different navbar based on whether the user is logged in or not?

Enhancing the Calculator Functionality in a React Program

Sign out the user if the API response is a 401 error

The ongoing ESLint conundrum: Balancing between "Unused variable" and "Unknown type" errors when utilizing imports for type annotations

The issue with jqTransform not displaying the select box value on a hidden contact form

Looking for a way to execute MySQL queries using promises in Protractor?

Transmitting multiple file attachments to a PHP file through AJAX

Tips for capturing everything in NextJs with getStaticPaths

Enhancing Angular input validators with updates

Unseen cells and sift through information in datatables

Unable to import CSV file

Guide to creating unit tests for document.URL in Angular 5 specifications