一个关于宜搭的异步请求的问题

你遇到的问题是异步请求导致的渲染问题。异步请求的回调函数是在请求完成后才执行，所以在getData函数返回结果之前是无法获得审批信息的。

一种解决方法是，你可以在请求表单数据的远程API的fit回调函数里面，获取到数据后，再利用Promise.all()函数去请求每一项实例的审批流程信息，并把它们存储在一个对象中。等到所有的审批流程信息都获取到之后，再把整个对象返回给表格数据源。这样，即使审批信息还没获取到，页面也可以正常渲染，等到异步请求完成后再展示审批信息。

下面是一个简单的示例代码：

async function getData() { let formData = await fetchFormData(); let approvalData = await fetchApprovalData(formData); return { formData, approvalData }; }

async function fetchApprovalData(formData) { let promises = formData.map(item => fetchApprovalDataAsync(item.id)); let approvalData = await Promise.all(promises); return approvalData; }

async function fetchApprovalDataAsync(id) { let response = await fetch(http://api.example.com/approval/${id}); let data = await response.json(); return data; } 在这个示例中，fetchFormData()函数用来获取表单数据，fetchApprovalData()函数用来获取每一项实例的审批流程信息，fetchApprovalDataAsync()函数则是一个单独请求审批信息的异步函数。最后在getData()函数中返回一个包含formData和approvalData的对象。

注意，以上代码是一个简单的示例，具体实现需要根据你的实际情况修改。

您好，您的问题是关于异步请求数据后如何在页面上渲染的问题。为了解决这个问题，您可以使用 Promise 对象或 async/await 方法来处理异步请求。

具体来说，您可以将请求表单数据和审批流程信息分别封装成 Promise 对象，并使用 Promise.all() 方法来等待两个 Promise 对象都 resolved 后再进行下一步操作。代码示例：

const getFormData = () => { return new Promise((resolve, reject) => { // 获取表单数据 const formData = getData(); // getData 是您远程 API 请求函数的简称 resolve(formData); }); }

const getProcessInfo = (instanceId) => { return new Promise((resolve, reject) => { // 获取某个实例的审批流程信息 // 这里的 instanceId 是您获取实例 ID 的方式，可能需要根据实际情况进行修改 const processInfo = getProcessData(instanceId); // getProcessData 是您的获取实例审批流程信息的函数 resolve(processInfo); }); }

Promise.all([getFormData(), getProcessInfo(instanceId)]).then(([formData, processInfo]) => { // 将审批流程信息挂到表单数据中 formData.processInfo = processInfo; // 渲染页面 renderTable(formData); }).catch((error) => { console.error(error); }); 另外，您也可以使用 async/await 方法来改写上述代码：

const getDataWithProcessInfo = async (instanceId) => { const formData = await getFormData(); const processInfo = await getProcessInfo(instanceId); formData.processInfo = processInfo; return formData; }

getDataWithProcessInfo(instanceId).then((formDataWithProcessInfo) => { renderTable(formDataWithProcessInfo); }).catch((error) => { console.error(error); }); 使用 async/await 更加简洁明了，但需要注意的是需要在包含该代码块的函数前面添加 async 关键字。

宜搭中创建并部署自定义页面的具体流程，可以参考 TodoMVC 的功能，TodoMVC 大概有以下功能：

创建待办任务- 用户在任务输入框中填写任务内容，点击回车键，会在任务列表中创建一条待完成的任务；

更新状态- 用户通过点击任务控制器，更改当前任务的完成状态（若已完成，任务文案将会被横线划掉）；

编辑任务内容- 用户点击任务 Edit 按钮，唤起任务内容输入框，用户可以进行内容更改并点击回车键进行提交（官方的 TodoMVC 是采用双击的方式切换任务编辑状态，由于宜搭暂未开放双击事件，因此使用按钮方式进行编辑态切换），

删除待办任务- 用户点击 Delete 按钮，删除指定的待办任务； 统计未完成数量- 在页面左下角显示当前未完成的待办任务的统计数量；

根据状态筛选- 用户通过切换页面底部的筛选器显示不同的任务列表：

All - 显示所有任务列表； Active - 显示待完成的任务列表； Completed - 显示已完成的任务列表； 清空完成状态的待办任务- 用户通过点击页面右下角的 Clear completed 按钮批量删除所有已完成的任务；

有没有尝试过使用Promise.all()方法来处理异步请求，确保所有数据都请求完毕后再进行渲染的办法呢？