kingdee-cosmic-clikingdee-cosmic-cli
首页
指南
  • 金蝶云苍穹社区
  • 资源市集
  • KDesign
  • CHATUI X
作者博客
首页
指南
  • 金蝶云苍穹社区
  • 资源市集
  • KDesign
  • CHATUI X
作者博客
  • 起步
    • 介绍
    • 安装与创建
    • 卸载与升级
  • 全局配置
  • 开发事项
    • 介绍
    • 苍穹预览模式
    • RAM模式
  • 生产与产物分析事项
  • 资源拉取策略分析
  • 数据请求策略
    • 策略设计
    • Mock服务
  • React18 起步工程
    • 介绍
    • 接口请求书写
    • 状态管理
    • 国际化
  • Vue3 起步工程
    • 介绍
    • 接口请求书写
    • 状态管理
    • 国际化
  • 主题色切换
  • 图标方案
  • 规范与温馨提示
    • Eslint
    • 工程与编码规范
    • 温馨提示
  • 未来计划与感谢 📅

书写方式

已将不同开发模式下的接口请求( model.invoke ),封装成了一个 Promise 内核的 Hook (src/hooks/useInvokeAsync.ts),可在组件和hooks中使用。

例子:

<script setup lang="ts">
import { inject, ref } from "vue";
import { useInvokeAsync } from "@hooks/index";
import StateManager from "@utils/store";
const invokeAsync = useInvokeAsync();
const store = inject<StateManager>("store");
/* Promise 请求示例 */
type NumType = {
  data: {
    num: number;
  };
};
const isLoading = ref<boolean>(false);
const params = ref<number>(1);
const add = async () => {
  isLoading.value = true;
  const data = await invokeAsync<NumType>("getNumType", params.value);
  params.value = data.data.num;
  isLoading.value = false;
};
</script>

<template>
  <div>
    <button @click="add" :disabled="isLoading">请求</button>
    <div>{{ isLoading ? "加载中" : "完成加载" }}</div>
  </div>
</template>

<style scoped lang="less">
</style>

对于请求后后端不会返回结果,也就是不会触发 update 的情况,可以这样调用:

invokeAsync("noResponse", params, { noResponse: true });

参数说明:

  • 第一参数:对应苍穹接口请求的自定义事件名称。

  • 第二参数:发送给接口的数据。

  • 第三参数:API 的配置项

目前可配置的有:

参数类型描述
noResponseboolean是否接口无回应
最近更新:: 2024/5/24 17:27
Contributors: 庞囧
Prev
介绍
Next
状态管理