深入理解Angular HTTP异步：POST后立即刷新数据的正确姿势

在angular应用中，当执行http post请求后立即尝试通过http get请求刷新数据时，可能会遇到数据未更新的问题。这通常是由于http请求的异步特性所致。本文将深入探讨这一现象的原因，并提供将get请求置于post请求的`subscribe`回调中的正确解决方案，以确保数据在post操作成功完成后及时更新，避免使用`settimeout`等非确定性延迟方法。

1. Angular HTTP请求的异步特性解析

在Angular中，HttpClient模块提供的HTTP方法（如get、post等）都返回RxJS的Observable对象。Observable代表一个异步操作流，它不会立即执行，而是只有当被subscribe订阅时才会开始执行。这意味着，当你调用http.post()方法时，它会立即返回一个Observable实例，但实际的网络请求可能仍在后台进行中。

考虑以下代码片段：

onProductCreate(products: { pName: string; desc: string; price: string }) {
  this.http
    .post<{ name: string }>(
      '******',
      JSON.stringify(products),
      { headers: new HttpHeaders({ myHeader: 'sachin' }) }
    )
    .subscribe({
      next: (res) => {
        // POST请求成功后的回调
      },
    });

  // 立即调用GET请求
  this.onProductsFetch();
}

登录后复制

在这种情况下，this.onProductsFetch()会紧接着this.http.post().subscribe()语句之后立即执行。由于POST请求是异步的，当onProductsFetch()被调用时，POST请求很可能还没有完成，数据库中的数据也尚未更新。因此，onProductsFetch()会获取到旧的数据，导致页面显示的数据没有及时更新。

而当使用setTimeout包裹onProductsFetch()时，例如：

setTimeout(() => {
  this.onProductsFetch();
}, 1000);

登录后复制

setTimeout会引入一个延迟，使得onProductsFetch()在1秒后才执行。在这1秒的间隔内，POST请求通常已经完成并将数据写入数据库。因此，当onProductsFetch()被调用时，它能够成功获取到最新更新的数据。然而，这种方法是一种不确定的延迟，无法保证POST请求一定会在1秒内完成，且引入了不必要的等待时间，不是一个健壮的解决方案。

2. 解决方案：链式响应处理

要确保在POST请求成功更新数据后才执行GET请求来刷新页面，正确的做法是将GET请求的调用放置在POST请求的subscribe回调函数中。subscribe的next回调会在Observable发出下一个值（即POST请求成功响应）时执行。

标签： css html js json go app 回调函数 响应式编程