Angular HTTP Post - 无法访问返回值

Question

对于我的项目，我正在制作一个 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});
}

方法2：

onSubmitP2()
{
this.onSubmitP1().subscribe((data) => this.result = data);
console.log(this.result);
console.dir(this.result);
}

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

Answer 1

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

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

Answer 2

以这种方式尝试相同的操作

onSubmitP2()
{
this.onSubmitP1().subscribe((data) => {
this.result = data
console.log(this.result);
console.dir(this.result);
});
}

我将console.logs放入结果到达后调用的回调中。 在您的版本中，日志是在调用启动后调用的，而不是完成的。 发生这种情况是因为异步JS的假设

Answer 3

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

Answer 4

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

onSubmitP2()
{
this.onSubmitP1().subscribe((data) => { 
this.result = data;
console.log(this.result);
console.dir(this.result);
});
}