当前位置：首页 > news >正文

promise

news 来源：原创 2025/6/28 23:33:15

handleFileChange(event) {var that = this;// 处理文件上传并传递回调函数this.$commonJS.handleFileUpload(event, function (tables) {console.log('tables at line 786:', tables);// 使用 Promise.all 等待所有表格解析完成Promise.all(tables.map((table) => {return new Promise((resolve, reject) => {// 解析每个表格that.$commonJS.parseTableToArray(table, (tableList) => {console.log('res at line 104:', tableList);// 生成 HTML 内容var contentHtml = `<div class="thumbnailTableBox wordTableHtml table_Box" style=""><table border="1" style="width: auto; border-collapse: collapse; text-align: center;">${tableList.map((row) => {return `<tr>${row.map((cell) => {return `<td colspan="${cell.colspan || 1}" rowspan="${cell.rowspan || 1}"><span>${cell.text || ''}</span></td>`;}).join('')}</tr>`;}).join('')}</table></div>`;// 将解析后的数据和生成的 HTML 返回resolve({ table_data: tableList, html_data: contentHtml });});});})).then((result) => {// 所有表格的解析完成后，处理结果that.uploadWordTables = result;that.tablesHtmlVisible = true;console.log('Processed tables:', that.uploadWordTables);}).catch((error) => {console.error('Error processing tables:', error);});});
},

代码解释：
Promise.all：

我们将每个表格的解析操作都包装在一个 Promise 内部，然后使用 Promise.all 等待所有表格的解析完成。这样，只有在所有表格解析完成后，then 方法才会被触发，确保 that.uploadWordTables 只有在所有数据都准备好后才会更新。

回调封装为 Promise：

对每个表格调用 that.$commonJS.parseTableToArray，并在回调中返回一个 Promise，该 Promise 在解析完表格后会 resolve 解析结果。

resolve 结果：

在每个表格解析完成后，我们使用 resolve 返回 tableList（表格数据）和 contentHtml（生成的 HTML 内容）。这些返回的数据会被 Promise.all 收集到 result 中。

更新 UI：

一旦所有表格解析完成，result 会包含每个表格的数据和 HTML 内容，我们将其赋值给 that.uploadWordTables，并设置 that.tablesHtmlVisible = true，显示表格内容。

优势：
并行处理：所有表格的解析操作是并行执行的，因此效率较高。

异步处理完毕后更新数据：通过 Promise.all 等待所有异步操作完成后才进行后续更新，确保数据的一致性和完整性。

简化逻辑：将所有表格的解析处理放在 Promise.all 内部，代码更加清晰易读。

总结：
通过将表格解析和生成 HTML 内容的操作封装为 Promise，并使用 Promise.all 等待所有操作完成，我们确保了在所有表格数据准备好后再更新 that.uploadWordTables，从而解决了你提到的问题。

相关文章：