0

as in the beforecreate() lifecycle hook the data won't be accessible what is the purpose to make API calls in it (I came accross it in many cases)

here an example:

  beforeCreate() {
    this.$myService.isEnabled().then(value => {
      this.isEnabled = value;
    }).finally(() => {
      this.$myService.getAll();
    });

the service

export function isEnabled() {
  return fetch(`url`, {
    method: 'GET',
  }).then(resp => {
    if (!resp) {
      throw new Error('blocking error');
    } else {
      return resp.text();
    }
  });
}

is it a good or bad practice ?

hai wayl
  • 1
  • 2
  • "in many cases" - this is false premise because beforeCreate isn't used in many cases. It's a bad practice because it gives a wrong impression about the availability of data. It won't be available before creation. Typically it's done in mounted. – Estus Flask Apr 07 '23 at 00:31
  • @EstusFlask **let's say in some examples** but why it is even used ? mabe to load response sooner ? as it has been said on this reply https://stackoverflow.com/questions/49577394/which-vuejs-lifecycle-hook-must-asynchronous-http-requests-be-called-in – hai wayl Apr 07 '23 at 00:38
  • The answer is imprecise. It doesn't even mention mounted hook. Doing unnecessary job in these hooks won't do any good. It will likely load the response several ms sooner but this is done at the expense of the responsiveness during initial comp rendering. If it's critical for data to be loaded asap, this needs to be done before the comp is rendered, e.g. with suspense – Estus Flask Apr 07 '23 at 00:53
  • @EstusFlask in case of api call in finally clause, does it wait for the response to be rendred **(promise state = pending)** or the finally be quit before getting the result ? (debugger skip to **});**) – hai wayl Apr 07 '23 at 23:42
  • Can you clarify what's your expected behaviour? Vue doesn't wait for promises in lifecycle hooks, the most it can do is to handle promise errors from them. – Estus Flask Apr 08 '23 at 05:23
  • @EstusFlask it is not an expected behavior indeed, I'm just asking (being new to js and discovering it..) – hai wayl Apr 08 '23 at 14:42
  • while debugging the above code, I noticed that when the response is not yet ready (promise on pending state) the debugger jump out to **});** (the **10th line** of the second method) afterward when the response is ready it come back to accomplish the action by entering to the then block **5-9 lines** and once this is done it enter to the then in the beforeCreated.. but in finally block (in the first method `this.$myService.getAll();` which is also a promise-> a fetch) the debugger jump out to **});** (6th of first method) **before even the json is returned** thus return value is `undefined` – hai wayl Apr 08 '23 at 14:44
  • I'm not sure that you debugged it correctly. But any way, `this.$myService.getAll()` is evaluated the last. And none of these asynchronous ops will pause component instantiation, meaning that the initial rendering will occur with no data and it will be fetched some time after – Estus Flask Apr 08 '23 at 14:58
  • @EstusFlask indeed the result was loaded later, I just thought in case that if for example I had a code below `this.$myService.getAll();`, this code that comes after won't be executed unless the **json** is returned but in fact it was executed before – hai wayl Apr 09 '23 at 13:18

0 Answers0