Question

我想显示一个从后端到Angular前端的页面。

后端：在“ http://localhost:8080/test”处，显示一个简单的“ hello”文本。

前端：在“ http://localhost:4200/editeur”处有一个按钮。当我单击按钮时，我想在按钮下方显示我的“ http://localhost:8080/test”内容（在这种情况下为“ hello”文本）。

我在Angular中使用了Promise（）。

这是我的Express后端中间件：

server.use('/test', (req, res, next) => {
res.json({ message: 'Hello' });
console.log('Hello');
next();
});

这是我的HTML前端：

<button class="btn btn-success" (click)="getEditeur()">Display backend</button>

这是我的TS Angular前端：

getEditeur() {

return new Promise((resolve, reject) => {
  this.http.get('http://localhost:8080/test').subscribe(
    (response) => {
      resolve(response);
    },
    (error) => {
      reject(error);
    }
  );
});
}

当我单击按钮时，console.log（'Hello'）;从我的后端作品来看，因此前端和后端之间的链接很好。但是现在我希望Promise（）在屏幕上显示res.json({ message: 'Hello' });消息。

谢谢！

Answer 1

您可以使用异步管道，请查看此示例?

组件

  data = null
  i = 1;

  getEditeur() {

    return new Promise((resolve, reject) => {
      // call the api => 
      // get the result ... 
      resolve({ message: 'Hello', times: this.i++ });
    });
  }

  getData() {
    this.data = this.getEditeur();
  }

模板

<button (click)="getData()">Click</button>

<pre>
  {{data | async | json}}
</pre>

<ng-container *ngIf="data | async  as messageData">
  <div>message from server {{messageData.message}} , times {{messageData.times}}</div>
</ng-container>

demo ??

每次单击该按钮后，该承诺都会解决，并给出nre承诺，因为解析后的数据将由json管道呈现，这就是为什么我要添加times属性的原因

没有异步管道，您可以使用 async / await

  async getData() {
    this.data = await this.getEditeur();
  }

demo ⚡⚡

最后，您可以使用promise then方法

  getData() {
    this.getEditeur().then(result=> this.data = result);
  }

选中此Promise

Answer 2

我相信可以使用Observable.toPromise

来简化您的getEditeur函数。

getEditeur() {
   return this.http.get('http://localhost:8080/test').toPromise()
}

Answer 3

您可以通过如下所示的API访问Promise响应

getData() {
 this.getEditeur().then(res=>{
   //use res as response from api
    this.data = res;
 }).catch(error =>{
   console.log(error);
  });
}

由https://stackoverflow.com/posts/56560723/revisions修改

如何在Angular中使用Promise（）从后端显示数据？

3 个答案: