哪个生命周期钩子是发送API获取请求的最佳实践？

Question

我只是想知道Vue内部目前是否有共识。js社区关于使用哪个生命周期钩子来调度API获取操作？

例如，我在我的Vuexstore中有一个操作：

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

操作将传递给服务：

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;

我通常会在为需要数据的组件创建的生命周期钩子中分派这个...但是肯定有一个更高性能的方法？

Answer 1

早在created（）中，您就可以从API获取并操作数据/状态<代码>装入（）在实例已经装入或呈现时调用。您通常会在此处执行与UI相关的设置。

此外，您还可以改进fetchAccount操作，如下所示：

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