React+TypeScript中Promise条件链式调用失效问题求助

你碰到的问题本质是没搞明白Promise链式调用的核心特性——每个then都会返回一个全新的Promise实例，而你当前的代码并没有把这个新Promise传递出去。我们一点点拆解来看：

为什么输出的是true而非5？ #

先看你的saveData函数：

const saveData = (): Promise<any> => { 
  const promise = new Promise((s:any,f:any) => s(true)) 
  if (true) { 
    promise.then(() => 5) // 这里创建了一个resolve为5的新Promise，但没返回它
  } 
  return promise // 返回的还是最初那个resolve为true的原始Promise
}

这里的关键是：promise.then(() => 5)确实会生成一个新的Promise，它的最终值是5，但你只是调用了这个then，却没有把这个新Promise替换掉原来的promise变量，最后返回的依然是一开始就resolve为true的那个原始Promise。所以当你在组件里调用saveData().then(a => console.log(a))时，你监听的是原始Promise的状态，自然拿到的是true。

如何实现有效的Promise链式调用？ #

有两种靠谱的解决方式，根据你的需求选：

方式一：在saveData内部返回链式后的新Promise

把then返回的新Promise赋值给原变量，最后返回这个经过处理的Promise：

const saveData = (): Promise<number> => { 
  let promise = new Promise((s, f) => s(true)) 
  if (true) { 
    // 将then生成的新Promise覆盖原变量，后续返回的就是这个新Promise
    promise = promise.then(() => 5) 
  } 
  return promise 
}

这样saveData最终返回的就是resolve为5的Promise，组件里调用时就能拿到预期的5了。

方式二：在组件调用时延续链式（不修改saveData）

如果不想改动saveData，可以在组件的回调里继续链式调用，监听then返回的新Promise：

<Component save={() => {
  saveData()
    .then(() => 5) // 基于saveData的结果生成新Promise，resolve值为5
    .then(a => console.log(a)) // 这里的a就是5
}}>

不过这种方式会把业务逻辑分散到组件中，更推荐第一种把逻辑封装在saveData里的写法。

额外建议：优化TypeScript类型 #

你代码里用了Promise<any>，建议换成明确的类型（比如上面例子里的Promise<number>），这样能获得TypeScript的类型检查支持，避免潜在的类型错误。

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