Как вызвать асинхронную функцию JavaScript? - PullRequest
Новая
       20

Как вызвать асинхронную функцию JavaScript?

5 голосов
/ 13 июля 2020

Может ли кто-нибудь помочь мне со следующим, я новичок в Async \ Await в Javascript:

У меня есть тривиальный класс: 

function Thing()
{
}

Thing.prototype.ShowResult = function ()
{
    var result = this.GetAsync();

    alert(result);
}

Thing.prototype.GetAsync = async function ()
{
    var result = await this.AsyncFunc();

    return result;
}

Thing.prototype.AsyncFunc = async function ()
{
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(6);
        }, 2000);
    });
}

Я называю это так : 

var thing = new Thing();

thing.ShowResult();

Я ожидал задержки в 2 секунды, прежде чем я увижу результат 6.

Вместо этого я сразу вижу:

[object Promise]

Как мне правильно дождаться результата? Спасибо за любую помощь.

Ответы [ 4 ]

4 голосов
/ 13 июля 2020

Вы должны сделать так, чтобы родительский элемент function также потреблял async function async. 

function Thing() {}

Thing.prototype.ShowResult = async function() { // add async
  var result = await this.GetAsync(); // await the response

  alert(result);
}

Thing.prototype.GetAsync = async function() {
  var result = await this.AsyncFunc();

  return result;
}

Thing.prototype.AsyncFunc = async function() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(6);
    }, 2000);
  });
}

Затем вы можете позвонить ShowResult

var thing = new Thing();

await thing.ShowResult();

Но, если вы звоните thing.ShowResult за пределы async function вам придется использовать синтаксис Promise, поскольку вы не можете await то, чего нет в async function. В JS нет понятия «ожидание верхнего уровня». Еще. 

var thing = new Thing();

thing.ShowResult().then( result => console.log(result) );
2 голосов
/ 13 июля 2020

В JavaScript функции asyn c всегда возвращают обещание (вот почему вы видите [object Promise]), которое можно разрешить либо путем вызова его метода then, либо с помощью ключевого слова await. На данный момент await можно использовать только внутри функций asyn c.

Чтобы применить это к вашей проблеме, вы можете выполнить одно из следующих действий:

# 1 

Thing.prototype.ShowResult = function ()
{
    this.GetAsync().then(alert);
}

thing.ShowResult();

# 2

В этом подходе ShowResult также является функцией asyn c. То, что я написал выше, применимо и к нему. 

Thing.prototype.ShowResult = async function ()
{
    var result = await this.GetAsync();
}

await thing.ShowResult();
0 голосов
/ 13 июля 2020

Ваша функция GetAsyn c () возвращает обещание для использования обещания, которое вы должны использовать либо await, либо .then подробнее о async / await 

function Thing() {}

Thing.prototype.ShowResult = async function() {
  var result = await this.GetAsync();
  alert(result);
}

Thing.prototype.GetAsync = async function() {
  var result = await this.AsyncFunc();
  return result;
}

Thing.prototype.AsyncFunc = async function() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(6);
    }, 2000);
  });
}

var thing = new Thing();

thing.ShowResult();

используя .then

function Thing() {}

Thing.prototype.ShowResult = async function() {
  var result =  this.GetAsync().then((result)=>alert(result));
}

Thing.prototype.GetAsync = async function() {
  var result = await this.AsyncFunc();
  return result;
}

Thing.prototype.AsyncFunc = async function() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(6);
    }, 2000);
  });
}

var thing = new Thing();

thing.ShowResult();
0 голосов
/ 13 июля 2020

Хотя AsyncFun c и GetAsyn c являются асинхронными c функциями. Функция ShowResult - нет. Также необходимо, чтобы родительская функция была asyn c. Приведенный ниже код возвращает 6. 

function Thing()
{
}

Thing.prototype.ShowResult = async function ()
{
    var result = await this.GetAsync();

    alert(result);
}

Thing.prototype.GetAsync = async function ()
{
    var result = await this.AsyncFunc();

    return result;
}

Thing.prototype.AsyncFunc = async function ()
{
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(6);
        }, 2000);
    });
}

var thing = new Thing();

thing.ShowResult();
...