vue3 方法分层命名规则 query、fetch、get

原创已于 2026-09-02 15:59:14 修改 · 152 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

于 2026-09-02 15:54:46 首次发布

三个前缀的通用语义

query：通常指发起一次查询（如数据库查询、HTTP GET 请求），并返回查询结果。
fetch：表示“获取”，也暗示异步操作，通常返回一个 Promise，resolve 后得到数据。
get：一般用于获取某个值或对象，可能是同步或异步，但核心是“返回数据”。

规范的分层逻辑

层级	前缀	职责	是否返回数据	示例
API 层	`query`	直接调用后端接口，返回原始响应数据	是	`queryUsers()`
内部	`fetch`	调用 API，处理加载状态、错误等，返回数据	是	`fetchUsers()`
对外暴露	`get`	供组件调用，可能包含缓存、去重、强制刷新等逻辑，返回数据	是	`getUsers()`

query

/**
 * 列表查询受理样品（通过子受理编号）
 *
 * @param applyNo 子受理编号
 * @returns 受理样品列表
 */
export const queryApplySamplesByApplyNo = (applyNo: string) => {
  if (!applyNo) {
    return Promise.reject(new Error("子受理编号不能为空"));
  }

  return request.get<ApplySampleResponse[]>(`${BASE_URL}/apply-no/${encodeURIComponent(applyNo)}`);
};

fetch

  /**
   * 获取受理样品列表
   * @param applyNo 子受理编号
   * @returns 受理样品列表
   */
  const fetchApplySamples = async (applyNo: string) => {
    try {
      applySampleTableLoading.value = true;
      const result = await queryApplySamplesByApplyNo(applyNo);
      return result.data;
    } catch (error) {
      return [];
    } finally {
      applySampleTableLoading.value = false;
    }
  };

get

  /**
   * 获取受理样品列表
   * @param applyNo 子受理编号
   * @returns 受理样品列表
   */
  const getApplySamples = async (applyNo: string) => {
    const applySamples = await fetchApplySamples(applyNo);
  };

标签

#vue.js #前端