数据转换后新Promise返回内容undefined问题排查

你的问题出在GetAllDebugEvents这个async函数的返回值处理上：

当this.properties.debugMode为true时，你用await处理了this.data.GetAllDebugEvents()的Promise，但整个if块里没有return任何值。虽然你在then回调里创建并返回了新的Promise，但这个返回值并没有被传递到外层的async函数中。async函数如果没有显式return值，会默认返回一个resolve为undefined的Promise，这就是UI层then回调里events为undefined的根本原因。

修复后的GetAllDebugEvents方法 #

推荐用纯async/await写法，避免混用await和then，代码更简洁且不易出错：

public async GetAllDebugEvents(): Promise<DebugEventObject[] | null> {
    // 先处理debugMode为false的情况，提前返回
    if (!this.properties.debugMode) {
        return null;
    }
    // 直接await获取数据，不用then
    const items = await this.data.GetAllDebugEvents();
    // 用map转换数组，直接返回转换后的结果（async函数会自动包装为Promise）
    return items.map(item => this.TranslateDBObjectToDebugEventObject(item, new DebugEventObject()));
}

额外的调用层优化 #

因为函数可能返回null，调用时最好先判断events是否存在，避免forEach报错：

private renderDebug(): void {
    let debugHtml: string = '';
    debugHtml += `<div id="debugContainer" class="${styles.debugContainer}">`;
    this.logic.GetAllDebugEvents().then((events: DebugEventObject[] | null) => {
        if (events) {
            events.forEach((e: DebugEventObject) => {  
                debugHtml += `<div class="${styles.row}"><div class="${styles.columnFull}">[${e.MessageDate}] - ${e.ErrorMessage.ErrorMessage}  [${e.ErrorMessage.StackTrace}]</div></div>`;
            });
        }
        debugHtml += `</div>`;    
    }).then(() => { 
        JQ("#WebPartBase").append(debugHtml);
    });
}

为什么原代码会失败？ #

原代码中，await this.data.GetAllDebugEvents().then(...)会等待then回调执行完成，但then回调里返回的Promise并没有被return给外层的async函数。async函数在执行完if块后没有return任何值，所以最终返回的是一个resolve为undefined的Promise，导致UI层拿到的events就是undefined。

内容的提问来源于stack exchange，提问作者JayHilton