前端获取接口数据流程_前端怎么调取接口

一、组件初始化阶段

1、初始化响应式状态对象：tablebody。

2、核心状态：

• 表格高度 ( tableHeight )

• 数据加载状态 ( tableLoading )

• 表格数据 ( tableList )

• 总条数 ( total )

• 分页参数 ( params )：设置默认分页参数。（第1页，每页50条）

const tableBody = reactive({ tableHeight: 600, showTable: true, tableLoading: false, tableList: [], total: 0, params: { pageNum: 1, pageSize: 50, // 默认每页50条 },});

二、表单和表格配置

1、表单字段：

通过 getFormFields 获取表单配置：

const formDataModel = reactive({});const formData = computed(() => ({ showButtons: false, confirmText: \'查询\', model: formDataModel, // 绑定表单数据模型 fields: getFormFields(), // 获取表单字段配置}));

getFormFields() 返回的表单配置：

[ { prop: \'dw\', type: \'input\', placeholder: \'单位\' }, { prop: \'yd\', type: \'datePicker\', placeholder: \'月度\' }]

2、表格列：

通过 getTableColumn 获取表格列配置：

const tableColumn = getTableColumn();

三、组件挂载自动加载数据

onMounted(init); // 组件挂载时触发数据加载const init = () => { getTableList();};

四、核心数据获取方法

const getTableList = async () => { try { tableBody.tableLoading = true; // 合并分页参数和表单参数 const params = { ...tableBody.params, ...formDataModel }; const res: any = await getInfoApi(params); if (res.status === 200) { tableBody.tableList = res.data.records || []; tableBody.total = res.data.total ? Number(res.data.total) : 0; } else { ElMessage.warning(res.message); } } finally { tableBody.tableLoading = false; }};

注：其中 res.status 的 status 为状态名，

不同接口可能会有不同的状态名（如code等），所以需要根据不同情况进行修改 。

1、参数合并策略

const params = { ...tableBody.params, // 分页参数 { pageNum: 1, pageSize: 50 } ...formDataModel // 表单参数 { dw: \'单位A\', yd: [\'2023-01\', \'2023-06\'] }};

合并后的请求参数示例：

{ \"pageNum\": 1, \"pageSize\": 50, \"dw\": \"单位A\", \"yd\": [\"2023-01\", \"2023-06\"]}

2、多种解构方式 

功能/解构方式 直接解构：data.rows 对象访问：res.data.rows API调用

const { data, code, message }

= await pageApi(params);

const res: any

= await getInfoApi(params);

状态码检查 if (code === 200)  if (res.status === 200)  数据赋值 tableBody.tableList = data.rows; tableBody.tableList = res.data.records;

3、响应数据处理

1.直接赋值

特点：保持原始结构 + 分页信息。

其中records要与接口返回的数组名一致。

如若是\"list\": [...]，那么就得是res.data.list。

tableBody.tableList = res.data.records || []; // 表格数据tableBody.total = Number(res.data.total) || 0; // 总数

假设后端返回数据结构： 

{ \"status\": 200, \"data\": { \"records\": [...], // 当前页数据 \"total\": 1250 // 总记录数 }}

2.字段映射

特点：必须转换 + 空安全

orgTypeList.value = (data as OrgItem[]).map(item => ({ label: item.name, value: item.id,

 转换过程：

// 原始数据[{ name: \"米哈油\", id: \"org-001\" }]// 转换后（丢弃id，保留label/value）[{ label: \"米哈油\", value: \"org-001\" }]

为什么一定要转换为 { label, value } 格式？

1. 适配 UI 组件的数据格式
2. 统一处理逻辑
3. 减少不必要的数据处理
4. 清晰分离显示值与存储值

在少数简单场景下可以直接使用原始数据：

• 纯字符串/数字的简单列表
• 组件明确支持自定义字段映射

五、用户交互触发点

1、查询按钮

const submitHandler = () => { console.log(\'Form Data Model:\', formDataModel); init(); // 触发数据加载};

2、数据统计按钮

const dataStatistics = () => { init(); // 同样触发数据加载};

3、表格刷新/分页

注：该代码所在文件位置:index.vue。

六、动态列显示 

按需求选择哪些列显示，哪些列不显示。

1. 表格操作组件引用index

2. 动态列计算属性hooks

const realTableColumn = computed(() => tableOperateRef.value?.realTableColumn ?? []);

3. 表格组件绑定index