javascript - 取消异步/等待

Question

我有如下功能

function async populateInventories(custID){
    this.inventories = await this.inventoryService.getCustomerInventories(custID)

    //do some stuff with Inventories

    // another await 

}

我的问题是我需要取消一个正在进行的等待请求，并像使用订阅一样发送一个新鲜的等待请求。

以前我的功能如下所示，我可以取消以前的订阅:

function async populateInventories(custID){

    let invetroySubscription$;

    if(invetroySubscription$!==undefined){
        invetroySubscription$.unsubscribe();
    }

    invetroySubscription$=this.inventoryService.getCustomerInventories(custID).subscribe((data:any)=>{
        this.inventories = data.response;

        //do some stuff with Inventories


         // another subscription here -- I was told this way of doing is wrong

    })

}

使用 async/await 我能够按顺序处理任何操作，这真的很棒，而且代码可读性非常好，我无法使用订阅来实现，但 async/await 有其自身的缺点。

我可以一次停止多个调用 填充库存 避免我的问题，但我正在寻找是否可以为我的问题找到更多解决方案(整洁)。

PS:我读到在订阅调用或嵌套订阅中调用另一个订阅不是一个好习惯。

Answer 1

处理异步操作的取消取决于 类型 和 方式我们正在执行异步操作。

我假设 类型 我们的异步操作是 HTTP 请求。因此，我们有几种选择如何执行实际的 HTTP 请求:

使用 HttpClient 来自 Angular 本身(最常见的情况和最佳实践!)

使用 爱讯 (afaik 是 Fetch API 的封装)

使用 获取 API 由浏览器自己提供

HttpClient

使用 HttpClient 时来自 Angular 本身的服务，建议与 RxJs 一起使用结合。所以在你的情况下，我会切换回你上面描述的 Observable 解决方案。为什么？:

HttpClient 本身使用 RxJs并默认返回 Observables

RxJs结合 HttpClient使用 可以“轻松”取消正在进行的请求切换 map 接线员

请注意 切换 map 它本身不会取消 HTTP 请求或保留它的逻辑。它只是调用 unsubscribe关于内部流的订阅。请求取消逻辑由 的实现提供HttpClient (或多或少)在取消订阅回调中返回取消逻辑。

不幸的是，写正确的RxJs 并不容易。代码并避免多个或嵌套订阅。在你的情况下，我会尝试创建一个(我假设)点击事件流并使用:

switchMap扁平化流(类似于 flatMap )并取消订阅现有的内部流，以防出现新的点击事件
发生。

concatMap等到完成inventoriesRequest流，在 populateInventoriesRequest 之前制作。

 this.populateInventoryClicks$
  .pipe(
    switchMap(() => this.inventoryService.inventoriesRequest()),
    concatMap(inventories => this.inventoryService.populateInventoriesRequest(inventories)),
  )
  .subscribe(response => {
    console.log(response);
});

请查看 Stackblitz 例子。在开发控制台的网络选项卡中限制您的速度。
然后，在网络选项卡中，我们应该看到在多次单击按钮时，只有最后一个请求完成，而之前的所有请求都被取消了。


爱讯

在使用 Axios 客户端时，我们可以使用 cancel它为我们提供的方法。看看他们的 documentation如果您对他们的方法感兴趣。
请注意，当我们使用 Axios 时没有 Http拦截器 from Angular 将在这些请求上运行。这是我知道没有人将它与 Angular 结合使用的最明显原因。

获取 API

Fetch API 还为我们提供了中止使用 fetch 发出的正在进行的请求的可能性。 .我不能推荐这种方法，原因与我不能推荐 Axios 方法的原因相同。但采取 look如果你有兴趣的话。