rxjs试用

rxjs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pagination with RxJS</title>
    <script src="https://unpkg.com/rxjs/dist/bundles/rxjs.umd.min.js"></script>
    <style>
        #data-container {
            margin-bottom: 20px;
        }

        .item {
            padding: 10px;
            border: 1px solid #ccc;
            margin-bottom: 5px;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
        }
    </style>
</head>

<body>
    <div id="data-container"></div>
    <button id="load-more">Load More</button>

    <script type="module">
        const { fromEvent, mergeMap, scan, startWith, map } = rxjs;

        // 模拟API请求函数
        function fetchData(page) {
            return fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=10`).then(response => response.json());
        }
        // 获取DOM元素
        const loadMoreButton = document.getElementById('load-more');
        const dataContainer = document.getElementById('data-container');
        // 创建点击事件流
        const click$ = fromEvent(loadMoreButton, 'click')
            .pipe(
                scan(acc => acc + 1, 1), // 记录当前页码
                startWith(1), // 初始页码为1
                mergeMap(page => fetchData(page)), // 发送fetch请求
                scan((acc, items) => [...acc, ...items], []) // 合并所有数据项
            );

        // 订阅数据流并在UI上显示结果
        click$.subscribe(items => {
            dataContainer.innerHTML = '';
            items.forEach(item => {
                const div = document.createElement('div');
                div.className = 'item';
                div.textContent = item.title;
                dataContainer.appendChild(div);
            });
        });
    </script>
</body>

</html>
posted @ 2025-03-24 10:46  卓能文  阅读(13)  评论(0)    收藏  举报