React中结合Axios与RxJS时subscribe()是否等价于Promise的then()

问题1：subscribe()功能是否可以等同于Axios返回Promise的.then()方法？ #

不能完全等同，二者有相似性但本质逻辑差异很大：

• 相似点：基础用法下都可以接收异步请求的成功响应、捕获错误回调，你当前场景下仅做成功赋值/错误打印的话，最终实现效果看起来一致。
• 核心差异：
  1. 执行时机不同：Promise是饥饿执行，你调用axios.put()的瞬间请求就已经发起，和是否调用.then()无关；而RxJS的Observable是懒执行，只要不调用subscribe()，请求永远不会发起。
  2. 能力边界不同：.then()只能处理单次异步结果，要实现请求重试、防抖、多请求合并等逻辑需要自己手写大量封装；而Observable可以通过pipe拼接各种内置操作符快速实现复杂异步逻辑，可扩展性远强于Promise。
  3. 取消能力不同：原生Promise无法取消，axios的取消逻辑是单独实现的CancelToken；而subscribe()返回的Subscription对象可以直接调用unsubscribe()取消订阅，同时会终止对应的Axios请求。

问题2：当前场景下是否需要主动执行取消订阅的操作？ #

需要主动添加取消订阅逻辑。
当前你的useEffect是空依赖，仅在组件挂载时触发请求，但如果请求还未返回时组件就被卸载，subscribe回调里的setShow()会触发React的内存泄漏警告。
修改方案很简单，在useEffect中返回取消订阅的逻辑即可，参考代码：

useEffect(() => {
  // 注意：你原有代码调用putApiCallExample没有传URL和data参数，会导致请求报错，记得补上
  const subscription = ApiCalls.putApiCallExample('你的请求URL', {请求参数}).subscribe(
    res => {
      console.log("1", res);
      setShow(true);
    },
    err => {
      console.log("2", err)
    }
  );
  // 组件卸载时执行取消
  return () => subscription.unsubscribe();
}, [])

问题3：混合使用Axios和RxJS会不会引发性能问题？ #

不会产生额外的性能问题。
你当前的用法只是通过from()做了Promise到Observable的转换，这个转换的开销几乎可以忽略。而且RxJS的所有内置操作符都经过了长期的性能优化，后续如果你需要实现请求防抖、失败重试、多请求串并行调度、请求竞态处理等逻辑，用RxJS内置能力比你手写实现的性能和稳定性更高。
唯一需要注意的是不要为了用RxJS而用RxJS，简单请求不需要堆叠不必要的操作符，就不会有性能冗余。

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