有条件地链接承诺不起作用

Question

我正在使用带有 Typescript 的 React 并具有此功能：

const saveData = (): Promise<any> => {
        const promise = new Promise((s:any,f:any) => s(true))

        if (true) {
            promise.then(() => 5)
        }

        return promise
}

然后我将它作为处理程序 prop 传递给某个组件：

<Component save={() => {saveData().then(a => console.log)}}

这总是在应该记录 5 时记录 true，为什么？我如何有效地链接这些承诺。我在这里做错了什么？

这是一个 codesandbox.io 示例：

https://codesandbox.io/embed/practical-montalcini-5njyg

Answer 1

then 不会更改调用它的承诺，它 return 是您忽略的新承诺。将其存储回 promise 或直接 return

const saveData = (): Promise<any> => {
        const promise = new Promise((s:any,f:any) => s(true))

        if (true as boolean) { // as boolean to make ts not complain about unreachable code
            return promise.then(() => 5)
        }

        return promise
}

还可以考虑使用 async/await 和 promises，以获得更好的编码体验：

const saveData = async (): Promise<any> => {
        await Promise.resolve();

        if (Math.random() > 0.5) {
            return 5
        }
        return 0;
}

有条件地链接承诺不起作用

Conditionally chaining promises not working

promise

typescript

reactjs

es6-promise