在 observable 中取消 fetch 方法

Question

我想在取消订阅returned observable

时取消fetch方法

所以我为什么要 return ()=>controller.abort()

为什么这个方法在我取消订阅时调用（）

createHttp(url: string) {
return new Observable((observer) => {
  const controller = new AbortController()
  const signal = controller.signal
  fetch(url, { signal })
    .then((response) => response.json())
    .then((body) => {
      observer.next(body);
      observer.complete();
    })
    .catch((error) => {
      observer.error(error);
    });
   return ()=>controller.abort()
});

}

如果我只是 return 它没有那样的 es6 函数

 return controller.abort()

如果我只是订阅()它会取消获取方法

Answer 1

Observable 的return 值需要是订阅者取消订阅时 Observable 可以调用的函数的引用。使用 return controller.abort()，您不是 return 对中止函数的引用，而是调用中止函数并 return 其 return 值。另一方面，使用 return () => controller.abort()，你不是在调用函数，你是在 returnObservable 可以在取消订阅时调用的函数本身。

考虑以下示例：

let sayHello = () => "Hello"

function exampleOne() {
  // return reference to sayHello function.
  return sayHello;
}

// vs

function exampleTwo() {
  // call sayHello function and return its value ("Hello").
  return sayHello();
}

编辑

此修改基于以下评论。

以下是创建 Observable 的框架：

new Observable((observer) => {
  // Invoked on subscribe.
  return () => {
    // Invoked on unsubscribe.
  }
});

在 observable 中取消 fetch 方法

cancelling fetch method within an observable

typescript

rxjs

fetch

unsubscribe

编辑