时间戳

首页 > 解决方案 > 有条件地链接承诺不起作用

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

问题描述

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

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

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

        return promise
}

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

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

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

这是一个代码sandbox.io 示例：

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

标签： reactjstypescriptpromisees6-promise

解决方案

then不会更改调用它的承诺，它会返回一个您忽略的新承诺。要么存回去，promise要么直接退回

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 与 Promise 一起使用，以获得更好的编码体验： 

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

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

推荐阅读