Как отобразить данные из бэкэнда с помощью Promise () в Angular?

Question

Я хотел бы отобразить страницу из моего Backend на мой угловой интерфейс.

Backend: в 'http://localhost:8080/test' Я отображаю простой текст "hello".

Frontend: в 'http://localhost:4200/editeur' есть кнопка.Когда я нажимаю на кнопку, я хотел бы отобразить свое содержимое 'http://localhost:8080/test' под кнопкой (поэтому мой текст "привет" в этом случае).

Я использовал Promise () в Angular.

Это мое промежуточное программное обеспечение внутреннего интерфейса 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:

getEditeur() {

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

Когда я нажимаю кнопку, console.log («Привет»);из моего бэкэнда работает, так что фронтэнд и бэкэнд хорошо связаны.Но теперь я хотел бы, чтобы мой Promise () отображал на экране сообщение res.json({ message: 'Hello' });.

Спасибо!

Answer 1

Вы можете использовать асинхронный канал, проверьте этот пример. 100

компонент

  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();
  }

шаблон

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

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

сообщение с сервера {{messageData.message}}, раз {{messageData.times}}

demo ??

каждый раз, когда вы нажимаете кнопку, будет действовать обещание после того, как это обещание разрешит данные, которые будут отображаться с помощью json pipeвот почему я добавляю свойство times

Без асинхронного канала вы можете использовать async / await

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

demo ⚡⚡

наконец, вы можете использовать обещание, а затем метод

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

проверить это Обещание

Answer 2

Я полагаю, что ваша функция getEditeur может быть упрощена с помощью Observable.toPromise

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

Answer 3

вы можете получить доступ к обещанию от API, как показано ниже

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