Question

我正在使用Angular 6-Spring Boot应用程序。前端-后端通信基于REST请求。例如：

 @GetMapping("/all")
 @ResponseBody
 public Iterable<ProductDto> getAllProducts(){
    return productService.getAllProducts();
 }

 @PostMapping("/add")
 public ProductDto addProduct(@Valid @RequestBody ProductDto productDto){
     return productService.addProduct(productDto);
 }

我正在通过第一个请求填充简单的HTML表，使用此方法来调用REST

populateProductTable() {    
    this.products = new Array<Product>();
    this.http.get<Product[]>('http://localhost:8080/product/all').subscribe(data => {
      for(let x in data) {
        const product = new Product();

        product.name = data[x].name;
        product.categoryName = data[x].categoryName;
        product.kcal = data[x].kcal    
        product.protein = data[x].protein
        product.fat = data[x].fat
        product.carb = data[x].carb    

        this.products.push(product);
      }
    });
  }

并通过POST添加项目：

addProduct() {    
    const product = new Product();

    product.name = this.productNameValue;
    product.categoryName = this.categoryValue;
    product.kcal = this.caloriesValue;
    product.protein = this.proteinValue;
    product.fat = this.fatValue;
    product.carb = this.carbsValue;

    let productJson = JSON.stringify(product);   
    let response;

    this.http.post('http://localhost:8080/product/add', productJson, options).subscribe(data => response = data);        

    do {
      this.resloveAfter1Second(this.populateProductTable());
      console.log(response);    
    } while(response == undefined);

  }

  resloveAfter1Second(x) {
    return new Promise(resolve => {
      setTimeout(() => {
        resolve(x);
      }, 1000);
    });
  }

您可以想象，我在更新表时遇到了麻烦。 POST有效，我将新的Product存储在数据库中，但是可能由于某种延迟而导致html呈现在屏幕上，因此每几个请求中的1个需要刷新另一个页面才能实际看到表中的新值。这就是为什么我尝试了一个简单的do-while循环，只要我没有响应就会调用它。不幸的是，这个循环永远持续下去，很快足以使我的Web浏览器崩溃。我敢说有更好的解决方案吗？

编辑＃我将Logger添加到了我的Spring Boot应用程序中，并使用了它而没有循环

this.resloveAfter3Second(this.populateProductTable());
  }

  resloveAfter3Second(x) {
    return new Promise(resolve => {
      setTimeout(() => {
        console.log("resolving promise");
        resolve(x);
      }, 3000);
    });
  }

我希望像这样的日志 -添加新产品 -读取所有产品

但是相反，我有几次 -阅读所有产品 -添加新产品

因此，看来我的Angular应用在POST之前先执行GET，但如何？

Answer 1

我不太了解您，但是如果您尝试确保在发布请求成功后重新获取项目，则对POST调用的响应为“ populateProductTable”的调用应嵌套在收到这样的消息：

    this.http.post('http://localhost:8080/product/add', productJson, options)
    .subscribe(data => { 
       populateProductTable();
       response = data; 
    });

等待后端响应以更新页面

1 个答案: