JavaScript：Promises 和 RxJS - subscribe() 和 then() 一样吗？答案

【问题标题】：JavaScript: Promises and RxJS - subscribe() same as then()?JavaScript：Promises 和 RxJS - subscribe() 和 then() 一样吗？
【发布时间】：2021-12-01 00:43:29
【问题描述】：

问题

我目前正在处理 UI 并且我使用 React。在 .jsx 组件内部，我拥有一切：HTML (JSX)、JavaScript-Logic 和 API 调用。一切都在一个文件中，这变得一团糟。

目标

我想外包功能，所以我创建了一个应该处理所有 API 调用的类。我也想使用 RxJS 并将 axios 与 RxJs 结合起来。

代码

代码中发生了什么？我有一个类 ApiCalls，其中包含一个静态方法 putApiCallExample。我在那里进行了 api 调用，但使用 axios 创建了一个 Promise。我使用 rxjs 的 from() 功能创建一个可观察对象，并在管道内返回数据。

在 Main.jsx 我在 useEffect()-hook 中使用它，我订阅它并根据它设置状态。

class ApiCalls:
    static putApiCallExample(URL, data){
        const promise = axios
            .put(URL, data, {
                headers: {
                    "Content-Type": "application/json"
                }
            });
    
        return from(promise).pipe(map(res => res.data));
    }


const Main = () => {
    
    const [show, setShow] = useState(false);

    useEffect(() => {
        ApiCalls.putApiCallExample().subscribe(
            res => {
                console.log("1", res);
                setShow(true);
            },
            err => {
                console.log("2", err)
            }

        );
    }, [])

}

问题

我可以像 axios 中的 .then() 一样解释 subscribe() 功能吗？
我需要在此处退订吗？
这是否会导致混合使用 axios 和 rxjs 时出现性能问题？

【问题讨论】：

this 回答你的问题了吗？
@RandyCasburn 嗨。你说，useEffect() 会重复，所以我需要 unsubscribe()。你能解释一下吗？
在这种情况下不会。

标签： javascript asynchronous promise rxjs

【解决方案1】：

我假设如果您使用 Axios，则不需要像 SSE 或 websocket 那样从服务器接收多个响应。所以：

我可以将 subscribe() 功能与 axios 中的 .then() 相同吗？

在某种程度上，是的，当 Axios Promise 解析时，会触发 observable subscribe 回调。那么它就不会再被触发了，所以在这种特殊情况下，RxJs observable 的行为方式与 Axios 承诺相同。

我需要在这里退订吗？

由于 Observable 不能被触发超过 1 次，我看不出有任何退订的理由。

这会导致混合 axios 和 rxjs 的性能问题吗？

您只是将 Axios 承诺包装到 RxJs 可观察对象中。此 RxJs 包装器不会有重要的内存或 CPU 蓝图。

顺便说一句，这基本上是 Angular Http 客户端在内部做的事情。我的看法是它是安全的，但它也没有带来太大的价值。

【讨论】：