Which life cycle hook is best practise to dispatch an API fetch request with?

Question

I'm just wondering if there is currently a consensus within the Vue.js community as to which life cycle hook to use for dispatching an API fetch action?

For example, I have an action such as in my Vuex store:

  ...
  actions: {
    fetchAccount: async ({ commit }, payload) => {
      await Vue.prototype.$API.fetchAccount(payload).then((response) => {
        commit("SET_ACTIVE_ACCOUNT", response.data);
      });
    },
  }
  ...

The action gets passed off to a service:

import { axios } from "@/services/http";
import { EventEmitter } from "events";

class accountServiceAPI extends EventEmitter {
  constructor() {
    super();
    this.accessToken = "";
  }

  fetchAccount(payload) {
    return new Promise({resolve, reject} => {
      axiosWave.get(`api//v2/accounts/retrieve/${payload.accountUUID}`, { headers: {} }).then(response => {
        if (response.success) {
          resolve(response.data);
        } else {
          reject(response.data);
        }
      }).catch(error => {
        reject(error.response);
      });
    });
  }
}

const accountServiceAPI = new accountServiceAPI();

accountServiceAPI.setMaxListeners(5);

export default accountServiceAPI;

I usualy dispatch this off in the created() life cycle hook for the component that the data is required to be for...but surely there must be a more performant way?

it is exactly where I would do it. But I would not mix `aync/await` and `then`. — oshell, Feb 28 '20 at 15:15
however, if your whole app depends on this, you can wrap the whole application in it before initializing it. — oshell, Feb 28 '20 at 15:17
@oshell Is there any different between using `mount()` and `created()` or even `beforeCreate()` ? — Micheal J. Roberts, Feb 28 '20 at 15:45
https://stackoverflow.com/questions/45813347/difference-between-the-created-and-mounted-events-in-vue-js — oshell, Feb 28 '20 at 15:48

score 1 · Accepted Answer · answered Feb 29 '20 at 14:29

1

You can fetch from API and manipulate your data/state as early as in created(). mounted() is called when the instance has already, well, mounted or rendered. You'll usually do UI-related setup here.

Also, you can improve the fetchAccount action like so:

fetchAccount: async ({ commit }, payload) => {
  const { data } = await Vue.prototype.$API.fetchAccount(payload);
  commit("SET_ACTIVE_ACCOUNT", data);
}

answered Feb 29 '20 at 14:29

Alfonz

1,010
13
26

Thanks Alphonsus, appreciate your answer on this. – Micheal J. Roberts Mar 02 '20 at 09:15

Which life cycle hook is best practise to dispatch an API fetch request with?

1 Answers1