Javascript 如何在rxjs和axios中永久重复订阅_Javascript_Rxjs_Axios

Javascript 如何在rxjs和axios中永久重复订阅

javascript rxjs

Javascript 如何在rxjs和axios中永久重复订阅,javascript,rxjs,axios,Javascript,Rxjs,Axios,我是rxjs的新手，接下来我将介绍它使用rxjs和axios创建一个简单的ajax服务。它工作得很好，但我想知道，我如何才能让订阅永远重复呼叫？我想那可能是因为。。应该是更好的方法。我读到rxjs有一个计时器和间隔，我试图实现，但它似乎不起作用我目前的代码是： HTML <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script> <

我是rxjs的新手，接下来我将介绍它使用rxjs和axios创建一个简单的ajax服务。它工作得很好，但我想知道，我如何才能让订阅永远重复呼叫？我想那可能是因为。。应该是更好的方法。我读到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>


你好，世界




单击me2

剧本

<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>


函数performGetRequest2（）{
//添加原型方法
//axios.axiosCancel（axios）；
AxiosSubscriber类扩展了rxjs.Subscriber{
建造师（观察员）{
超级观察员；
//创建示例请求id
//this.requestId=Math.random（）+'-xhr id'；
this.requestId=document.getElementById（“input2”）.value；
//中止指针
this.aborted=false；
//在订阅时发出axios请求
axios({
url:“../Home/test2”，
方法：“get”，
参数：{
id:this.requestId
}
})
。然后（（响应）=>{
observer.next（响应.数据）；
document.getElementById（“getResult2”）.innerHTML+=response.data+“
”；
observer.complete（）；
})
.catch（（错误）=>{
观察者错误（错误）；
});
}
退订{
super.unsubscribe（）；
//取消XHR
如果（this.aborted==false）{
试一试{
axios.cancel（this.requestId）；
}
捕获（ee）{
//控制台错误（ee）；
}
this.aborted=true；
}
}
}
let observable$=新rxjs.observable（（观察者）=>{
返回新的AxiosSubscriber（观察员）；
});
rxjs.fromEvent（document.getElementById（'input2'），'input'））
.烟斗(
rxjs.operators.switchMap（（）=>observeable$）
)
.subscribe（console.log）；
}

你能分享一下你的知识吗？

您可以看到，但它不起作用，因为get请求指向一个不存在的位置

下面是一个示例片段，希望能帮助您获得所需：

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

是的！我做了下一个改动，现在效果很好！rxjs.interval（700）.pipe（rxjs.operators.switchMap（（）=>observeable$）.subscribe（console.log）；也可以通过这种方式取消订阅：subscription=rxjs.interval（700）.pipe（rxjs.operators.switchMap（（）=>observable$）.subscription（console.log）；