异步场景下扩展运算符行为不符预期？合并API返回对象求助

背景 #

我正在Web应用中用两个相似的API调用替代硬编码逻辑，暂时没有时间重写整套流程与端点来实现相同功能。已经通过Promise.all成功获取到两个接口的数据，但页面使用的Handlebars模板需要单个对象来遍历渲染下拉选项。

初始尝试与问题 #

我尝试用扩展运算符合并两个结果并去重，在控制台同步模拟时能得到预期结果，但实际异步运行时结果变成了嵌套结构。

初始代码：

Promise.all([
        this.isUsers = GetUsersByRole("Inside Sales", app.user.id),
        this.asmUsers = GetUsersByRole("Area Sales Managers", app.user.id)
    ]).then((is, asm) => {
        // is 和 asm 包含正确数据，我只想合并它们
        this.users = {...is, ...asm};
        var dummy = {...is, ...asm};
        console.log("dummy", dummy);
    });

运行后dummy是包含两个独立对象的嵌套结构，并非合并后的预期结果。

后续尝试 #

数组解构Promise结果 #

修改代码使用数组解构接收Promise结果：

Promise.all([
        this.isUsers = GetUsersByRole("Inside Sales", app.user.id),
        this.asmUsers = GetUsersByRole("Area Sales Managers", app.user.id)
    ]).then(([is, asm]) => {
        this.users = {...is, ...asm};
        var dummy = {...is, ...asm};
        console.log("Dummy", dummy);
    });

结果dummy对象完全为空。

尝试数组扩展运算符 #

改用数组扩展运算符尝试合并：

var dummy = [...is, ...asm];

抛出类型错误：

Uncaught (in promise) TypeError: is is not iterable

最终解决 #

将发起API调用的GetUsersByRole函数修改为返回Promise后，代码正常工作，能够正确合并两个API返回的对象。

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