Question

我在捕捉可观察到的错误时遇到了问题。我正在使用angular 7和rxjs 6.3.3。

上下文

我正在写一个网上商店，将购物车存储在本地存储中。某些事件（例如，加载购物车概述）需要具有最新版本的购物车。在这种情况下，我会在本地存储中获取购物车的ID，并与API联系以获取最新版本。请求完成后，我将更新本地存储。到现在为止，这一切正常。有时可能是我的本地存储中的购物车在数据库中不再存在，并且在联系API时收到未找到404的信息。我要实现的目标是，我的网上商店将捕获此404，然后创建一个新的购物车。

框架代码

由于我们正在为多个客户端使用框架，因此我们编写了具有常规操作的库。 lib安装在有角度的网站上。

获取购物车的代码：

  getShoppingCart(userId: number, id: number): Observable<ShoppingCart> {
    return this.get(`api/users/${userId}/shoppingcarts/${id}`);
  }

创建新购物车的代码：

  createShoppingCart(command: CreateShoppingCartCommand): Observable<ShoppingCart> {
    return this.post(`api/users/${command.userId}/shoppingcarts`, command);
  }

应用代码

  // write to local storage
  get ActiveShoppingCart(): ShoppingCart {
    const value: string = localStorage.getItem('shoppingCart');
    if (!value) {
      return null;
    }
    const shoppingCart: ShoppingCart = JSON.parse(value);
    return shoppingCart;
  }

  // get from local storage
  set ActiveShoppingCart(shoppingCart: ShoppingCart) {
    localStorage.setItem('shoppingCart', JSON.stringify(shoppingCart));
    this.notifyObservers();
  }

  // this method will return the most up to date shopping cart
  getUpdatedShoppingCart(): Observable<ShoppingCart> {
    const activeShoppingCart: ShoppingCart = this.ActiveShoppingCart;

    if (activeShoppingCart) {
      // if the shopping cart is saved in the local storage, use this one
      // if I receive a 404 error, catch it, remove it from localstorage and execute this method again
      return this.libShoppingCartService.getShoppingCart(activeShoppingCart.userId, activeShoppingCart.id).pipe(
        catchError((_: any) => {
          this.ActiveShoppingCart = null;
          return this.getActiveShoppingCart();
        })
      );
    }

    // code to create a new shopping cart and save it to local storage, this works fine
  }

问题

catchError实际上并未捕获此http 404错误。我正在寻找一种方法来捕捉这一点。我宁愿在我的应用程序中解决此问题，而不是在框架代码中进行修复，但是如果没有其他选择，我很乐意这样做。

我不是要找一个确切地告诉我该怎么做的人，但是如果有人可以给我一些指示我的代码有什么问题，那太好了！：）

其他信息

在我的控制台中，我收到以下错误（有意义）

获取https://apiurl/api/users/28/shoppingcarts/87 404

错误TypeError：您在期望流的位置提供了“ undefined”。您可以提供一个Observable，Promise，Array或Iterable。       在subscribeTo（subscribeTo.js：41）       在subscribeToResult（subscribeToResult.js：11）       在CatchSubscriber.push ../ node_modules / rxjs / _esm5 / internal / operators / catchError.js.CatchSubscriber.error（catchError.js：43）       在XMLHttpRequest.onLoad（http.js：1547）       在ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask（zone.js：421）       在Object.onInvokeTask（core.js：14182）       在ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask（zone.js：420）       在Zone.push ../ node_modules / zone.js / dist / zone.js.Zone.runTask（zone.js：188）       在ZoneTask.push ../ node_modules / zone.js / dist / zone.js.ZoneTask.invokeTask上[作为调用]（zone.js：496）       在invokeTask（zone.js：1540）

Angular 7捕获了可观察的HTTP错误

0 个答案: