JavaScript: Promises 和 RxJS - subscribe() 和 then() 一样吗？

Question

问题

我目前正在 UI 工作，我使用 React。在 .jsx 组件内部，我拥有一切：HTML (JSX)、JavaScript-Logic 和 API 调用。一切都在一个文件中，这会变得混乱。

目标

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

代码

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

在 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)
            }

        );
    }, [])

}

问题

我可以插入 subscribe() 功能与 .then() 来自 axios[=50 的功能相同吗=] ?

我需要在这里退订吗？

混合使用 axios 和 rxjs 是否会导致性能问题？

Answer 1

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

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

在某种程度上，是的，当 Axios promise 解析时，会触发可观察订阅回调。然后它不会再被触发，所以在这个特定的情况下，RxJs observable 的行为与 Axios promise 相同。

我需要在这里退订吗？

由于 Observable 的触发次数不能超过 1 次，我看不出有任何取消订阅的理由。

混合使用 axios 和 rxjs 是否会导致性能问题？

您只是将 Axios promise 包装到 RxJs observable 中。这个 RxJs 包装器不会有显着的内存或 CPU 蓝图。

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

JavaScript: Promises 和 RxJS - subscribe() 和 then() 一样吗？

JavaScript: Promises and RxJS - subscribe() same as then()?

javascript

asynchronous

promise

rxjs