api调用成功如何调用toast？答案

【问题标题】：How to call a toast if api call is success?api调用成功如何调用toast？
【发布时间】：2023-02-23 16:33:17
【问题描述】：

我需要帮助理解和在 Angular + Ionic 6 应用程序中实现 toast 消息......

在我的应用程序中，我想在清除购物车、提交订单等某些事件时显示吐司消息......在这种情况下，我希望吐司消息显示通过 API 调用发送给我的消息。

我已经尝试过 ionic docs 实现，但我不确定如何调用 toast 消息并将消息传递给它。

在 POSTMAN 中，消息响应如下所示：

{
    "message": "You have successfully cleared the cart"
}

这是清除购物车的 API 调用 (cart.service.ts)：

  clearCart() {
    return from(Preferences.get({key: 'TOKEN_KEY'})).pipe(
      switchMap(token => {
        const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);
        return this.httpClient.delete<ShoppingCart>(`${environment.apiUrl}cart`, {headers, observe: 'response'});
      }),
      catchError(err => {
        console.log(err.status);
        if (err.status === 400) {
          console.log(err.error.message);
        }
        if (err.status === 401) {
          this.authService.logout();
          this.router.navigateByUrl('/login', {replaceUrl: true});
        }
        return EMPTY;
      }),
    );
  }

这是我的购物车页面 (cart.page.ts) 中离子文档中的 clearCart 函数和 presentToast 函数：

    clearCart() {
        this.cartService.clearCart().subscribe(
          (data: any) => {
            this.products = [];
            this.totalProducts = 0;
            this.totalCartPrice = 0;
          },
          error => {
            console.log('Error', error);
        });
      }

  async presentToast(position: 'bottom') {
    const toast = await this.toastController.create({
      message: 'Hello World!',
      duration: 1500,
      position
    });

    await toast.present();
  }

我什至在实施吐司消息方面走上了正确的道路，还是一开始就搞砸了？ :)

在哪里调用 presentToast 函数？我如何传递其中的消息？我需要制作一个新的 toast 组件吗？

【问题讨论】：

标签： javascript angular typescript ionic-framework

【解决方案1】：

尝试使用 toastify

https://apvarun.github.io/toastify-js/#

这是一个示例 sn-p：

try {
  await login(values.email, values.password);
  navigate('/');
  toast.success('Login Successful!')
} catch (error) {
  toast.error('Invalid User Credentials!')
  setLoading(false);
}

【讨论】：

嘿，谢谢你的想法，但我只需要使用原生 Ionic 组件。

【解决方案2】：

您必须重写 toast present 方法以接受消息作为参数。

async presentToast(message, position: 'bottom') {
const toast = await this.toastController.create({
  message: message,
  duration: 1500,
  position
});

然后因为你订阅了结果表单 http 删除请求，你可以只需将烤面包放入 clearCart() 方法中，如下所示：

this.cartService.clearCart().subscribe(
      (data: any) => {
        this.presentToast(data.message);
        this.products = [];
        this.totalProducts = 0;
        this.totalCartPrice = 0;
      },
      error => {
        console.log('Error', error);
    });

【讨论】：

【解决方案3】：

presentToast() 没有被呼叫到任何地方。

您是否检查数据是否在您的 subscribe 方法中将消息返回给您？如果是这样，我们可以在参数中传递message，并在cart.page.ts 上的subscribe 中调用presentToast。

【讨论】：