Fetching data in VueJs before redirecting to a new page

Question

Fetching data in VueJs before redirecting to a new page

Within the mounted function, I am creating an action that fetches data from a Rest API and populates my table in a Vue.js component

mounted() {
    UserService.getProjects().then(
      (response) => {
        this.isProject = true;
        this.projects = response.data;
      },
      (error) => {
        this.isProject = false;
      }
    );
}

However, when I click on the menu to navigate to this page, I get redirected in one second but the data is still loading. As a result, the table appears empty initially. Is there a way to first fetch the data and then redirect to this page? Any help is appreciated.

Additionally, I am using router-link to navigate to another page

javascript html css typescript vue.js

Answer 1

Answer №1

If you're wondering about the specific question you asked, check out Navigation Guards.

To implement something similar in your router:

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        UserService.getProjects().then(
          (response) => {
            // update store or state
            next()
          },
          (error) => {
            // update store or state
            next(false); // handle the error
          }
        );
      }
    }
  ]
})

However, it's likely not ideal to wait for data loading before transitioning to a route. It's better to display a loading state while waiting for the data to be ready, as you are already doing in your template and existing mounted function.

If you block navigation, consider how to handle failures in data loading.

Answer 2

If you're wondering about the specific question you asked, check out Navigation Guards.

To implement something similar in your router:

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        UserService.getProjects().then(
          (response) => {
            // update store or state
            next()
          },
          (error) => {
            // update store or state
            next(false); // handle the error
          }
        );
      }
    }
  ]
})

However, it's likely not ideal to wait for data loading before transitioning to a route. It's better to display a loading state while waiting for the data to be ready, as you are already doing in your template and existing mounted function.

If you block navigation, consider how to handle failures in data loading.

Answer 3

Answer №2

If you want to implement asynchronous behavior in the mounted hook, you can consider using async and await.

async mounted() {
    await UserService.getProjects().then(
      (response) => {
        this.isProject = true;
        this.projects = response.data;
      },
      (error) => {
        this.isProject = false;
      }
    );
}

Alternatively, you can also achieve this with Promises.

async mounted() {
    await Promise.all(
    UserService.getProjects().then(
      (response) => {
        this.isProject = true;
        this.projects = response.data;
      },
      (error) => {
        this.isProject = false;
      }
    );)
}

Answer 4

If you want to implement asynchronous behavior in the mounted hook, you can consider using async and await.

async mounted() {
    await UserService.getProjects().then(
      (response) => {
        this.isProject = true;
        this.projects = response.data;
      },
      (error) => {
        this.isProject = false;
      }
    );
}

Alternatively, you can also achieve this with Promises.

async mounted() {
    await Promise.all(
    UserService.getProjects().then(
      (response) => {
        this.isProject = true;
        this.projects = response.data;
      },
      (error) => {
        this.isProject = false;
      }
    );)
}

Fetching data in VueJs before redirecting to a new page

Answer №1

Answer №2

Similar questions

Concurrent Accordion and Color Transformation Animations

Setting up 'ngProgress' as a loader in my project using the 'ngbp boilerplate' is straightforward and easily customizable

How can the default text color be adjusted in NSAttributedString when initialized with HTML dark mode?

How to efficiently manage multiple input fields with a single ref in React using TypeScript

Eliminate any unfamiliar or unidentifiable text that appears on the

Error: $this.text is throwing a TypeError and is not working as a function

Exploring the functionalities of TypeScript's mapKey and pick features

The "if" statement carries out the identical action each time it is executed

Guide to displaying Fontawsome icons with CSS2D Renderer/Object

Angular Bootstrap Popover will now automatically hide after a short period of time due to the removal of the tt_isOpen variable in ui-bootstrap-tpls-0

How to apply a CSS class to the body element using Angular 2

Send data from the URL to PHP and then to Javascript in order to showcase the value within an input field

What steps can I take to stop Highcharts from showing decimal intervals between x-axis ticks?

Implement OAuth for user authentication and registration using a customized username feature on an express.js platform

Upon inputting the text value, the concealed button will automatically appear without the need to press any buttons

jquery executes a function on each element that is discovered using the .find method

Ways to convert a JavaScript object's properties into JSON format

What is the best way to restrict the border to just one element?

Angular 1: Handling Multiple Conditions and Exclusions Based on Other Conditions

Decline the input according to the percentage