Question

我正在通过Observable进行API调用。如果此API调用超过200毫秒，我想显示一个加载屏幕（通过为我的'loading'变量分配'true'），否则我不想显示任何内容，以避免屏幕上闪烁。

是否有RxJS操作员能够这样做？

this.apiService.get(`/api/someEndpoint`)

// I hope for something like
.triggerIfAtLeastThisAmountOfTimeHasElapsed(200, () => {
  this.loading = true;
})

.subscribe(response => {

  // Process the response

  this.loading = false;
});

Answer 1

有很多方法可以做到这一点，所以你可以使用例如：

let exec = [];
await Promise.map(list => getData());
// Here Promise.map iterates over list
// and returns a list of promises which are 
// then resolved using await

Answer 2

按照马丁的回应，这是一个应该模拟你的背景的例子

const obs1 = Observable.timer(200).take(1);

const apiSubject = new Subject<string>();
const apiObs = apiSubject.asObservable();
const apiExecutionElapsed = 1000;

const obs3 = Observable.merge(obs1, apiObs);

let loading = undefined;

obs3.subscribe(
  data => {
    console.log(data);
    if (loading === undefined && data === 0) {
      loading = true;
    } else {
      loading = false;
    }
    console.log('loading', loading);
  },
  console.error,
  () => {
    loading = false;
    console.log('loading', loading);
  }
)

setTimeout(() => {
  apiSubject.next('I am the result of the API');
  apiSubject.complete()}, apiExecutionElapsed)

如果api（apiExecutionElapsed）的执行时间超过配置的计时器（在这种情况下为200 ms），则会看到loading标志变为第一个为真，然后为false。否则它总是假的。

当且仅当自RxJS订阅以来经过了一定时间后才执行函数

2 个答案: