Angular HTTP Post - 无法访问返回值[重复]

Posted 2023-03-13

【中文标题】Angular HTTP Post - 无法访问返回值[重复]

【英文标题】：Angular HTTP Post - Unable to access returned value [duplicate]

【发布时间】：2020-04-29 16:18:51

【问题描述】：

对于我的项目，我正在制作一个 Angular 前端，其中将发出大量 HTTP POST 请求，数据被传递到后端，然后后端返回数据作为确认。我已经完成了第一部分的工作，后端接收数据，但是一旦我尝试访问返回的数据，我就会不断发现我将数据传递给的变量正在返回“未定义”。我已经使用 Postman 来确认后端正在正确接收和返回数据，因此前端可能是罪魁祸首。我的代码如下：

方法一：

 onSubmitP1()
  
    const formData = new FormData();
    formData.append('data_selection', this.SearchDataForm.get('dataselection').value);

    console.dir(this.SearchDataForm.get('dataselection').value);

    let headerOptions = new HttpHeaders();
    headerOptions.append('Content-Type', 'application/text; charset=UTF-8');

    return this.httpClient.post(this.SERVER_URL, formData, headers: headerOptions);
  

方法二：

onSubmitP2()
  
    this.onSubmitP1().subscribe((data) => this.result = data);

    console.log(this.result);
    console.dir(this.result);
  

当我的 html 提交按钮被按下时首先调用方法 2，然后调用方法 1，它实际上发出 POST 请求并返回可观察值。我希望将我的 Web 服务返回的数据分配给“结果”，以便我可以查看它，但它一直返回“未定义”。

【参考方案1】：

您的 onSubmitP2() 订阅了 onSubmitP1() 方法，因此您在异步调用结束时设置 this.result = data （基本上在 Http 请求结束时），但您正在写入立即控制台。 更改您的订阅：

onSubmitP2()
  
    this.onSubmitP1().subscribe((data) =>  

       this.result = data;

       console.log(this.result);
       console.dir(this.result);

    );
  

【参考方案2】：

以这种方式尝试相同的方法

onSubmitP2()
  
    this.onSubmitP1().subscribe((data) => 
     this.result = data

     console.log(this.result);
     console.dir(this.result);
    );

  

我将 console.logs 放入结果到达后调用的回调中。在您的版本日志中，在调用刚启动后调用，未完成。这是因为异步 JS 概念而发生的

【参考方案3】：

这里的问题在于了解异步代码的工作原理，尤其是在 JS/TS 中。您的 console 行在返回任何内容之前运行，因为订阅尚未产生任何内容。我强烈建议查看异步代码在 Web 开发中的工作原理，但这里有一个临时解决方案：

this.onSubmitP1().subscribe((data) => 
  this.result = data;
  // handle result stuff here
);

【参考方案4】：

您无法访问，因为它是异步调用。就像知道未来;) 在服务器准备好结果后，将调用订阅的函数。而且由于它是异步调用，因此您编写的代码将在之前发生，然后函数将结束。