javascript - 如何在 rxjs 和 axios 中永远重复订阅

标签 javascript rxjs axios

我是rxjs新手,关注下Example它使用 rxjs 和 axios 创建一个简单的 ajax 服务。它工作得很好,但我想知道,我怎样才能让订阅永远重复调用?我认为也许 javascript setTimeout 但是..应该是更好的方法。我读到 rxjs 有一个计时器和间隔,我试图实现,但它似乎不起作用。

我当前的代码是:

HTML

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.4.0/rxjs.umd.js"></script>
<div>hello world</div><br /><br />
<textarea rows="4" cols="50" id="input2"></textarea><br />
<button id="theButton2" onclick="performGetRequest2()">click me2</button><br /><br />
<div id="getResult2"></div>
<br /><br />
</body>

脚本

<script>

    function performGetRequest2() {
        // add prototype method
        //axios.axiosCancel(axios);

        class AxiosSubscriber extends rxjs.Subscriber {
            constructor(observer) {
                super(observer);

                // create sample request id
                //this.requestId = Math.random() + '-xhr-id';
                this.requestId = document.getElementById("input2").value;

                // XHR abort pointer
                this.aborted = false;

                // make axios request on subscription
                axios({
                    url: '../../Home/test2',
                    method: 'get',
                    params: {
                        id: this.requestId
                    }
                })
                    .then((response) => {
                        observer.next(response.data);
                        document.getElementById("getResult2").innerHTML += response.data + "<br>";
                        observer.complete();
                    })
                    .catch((error) => {
                        observer.error(error);
                    });
            }

            unsubscribe() {
                super.unsubscribe();

                // cancel XHR
                if (this.aborted === false) {
                    try {
                        axios.cancel(this.requestId);
                    }
                    catch (ee) {
                        //console.error(ee);
                    }
                    this.aborted = true;
                }
            }
        }

        let observable$ = new rxjs.Observable((observer) => {
            return new AxiosSubscriber(observer);
        });



        rxjs.fromEvent(document.getElementById('input2'), 'input')
            .pipe(
                rxjs.operators.switchMap(() => observable$)
            )
            .subscribe(console.log);
    }


</script>

你能分享一些你的知识吗? 你可以看到 jsfiddle但它不会工作,因为获取请求指向一个不存在的地方

最佳答案

下面是一个示例片段,希望能帮助您获得所需的内容:

import { from, interval } from 'rxjs'; 
import { switchMap } from 'rxjs/operators';

function axios(url, pollingInterval) {

  // A stub for the axios Promise object. Replace with your real axios Promise object.
  const axiosStub = new Promise((res, rej) => res({ foo: 'bar'}));

  // Convert the axios Promise to an Observable
  const axiosObservable = from(axiosStub);

  // Use the RxJs interval to set up a polling cycle.
  return interval(pollingInterval).pipe(
    switchMap(() => axiosObservable),
  );
}

// Subscribe to axios responses
axios('http://localhost/my/url', 1000).subscribe(res => console.log(res))

StackBlitz Example

关于javascript - 如何在 rxjs 和 axios 中永远重复订阅,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55304312/

相关文章:

Javascript if 语句在 html 页面上无法正常工作

javascript - Angular - 观察者 map 未按预期工作

javascript - 我如何让 TestScheduler 在 RxJs5 中打勾?

javascript - React 组件未正确加载

javascript - react 表 : TypeError: Cannot read property 'forEach' of undefined 问题

Javascript 字符限制和使用 getElementById 调用函数

angular - RxJs难题:共享流并在有新订阅时有条件地重试

performance - 我的 Cors 预检选项请求似乎很慢

javascript - 如何处理 axios 中的 401(身份验证错误)并使用react?

javascript - 在 Safari 4 窗口中停止按键事件冒泡