TypeScript中字符串与随机整数拼接返回[object Promise]问题

问题原因 #

标记为async的函数，无论内部是否包含异步逻辑，其返回值都会被自动包装成Promise对象。直接将这个Promise和字符串拼接时，JavaScript会调用Promise的toString()方法，最终得到"Test_[object Promise]"的结果。

解决方法 #

方法1：使用await等待Promise兑现

因为addApiName本身也是async函数，所以可以用await关键字暂停函数执行，直到getRandomInt的Promise完成，拿到实际的随机整数后再进行拼接：

async addApiName(){
    var randInt = await this.getRandomInt(100,2000)
    var name = "Test_" + randInt
    // 后续可以正常使用name变量，比如return name或者执行其他逻辑
}

方法2：使用Promise的then()方法处理结果

如果不想使用await，可以通过then()注册回调函数，在Promise成功resolve后再完成字符串拼接：

async addApiName(){
    this.getRandomInt(100,2000).then(randInt => {
        var name = "Test_" + randInt
        // 在回调函数内处理拼接后的name
    })
}

额外优化建议 #

你的getRandomInt函数内部并没有真正的异步操作（比如没有await其他异步任务），若不需要处理异步逻辑，可直接去掉async关键字，这样它会直接返回原始的随机整数，从根源避免Promise拼接问题：

getRandomInt(min: number, max: number) {
    var min = Math.ceil(min);
    var max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1) + min); 
}

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