Async / Await не ожидает ответа и возвращает объект Promise

Question

Использование ES6, Классы и Aync / Await ...

Цель состоит в том, чтобы иметь класс "Api", который выполняет асинхронные вызовы с помощью fetch и возвращает некоторые данные .... но даже базовый фундамент не работает.

в основном js запускается следующий фрагмент, который запускает цепочку событий:

let api = new Api();
let api_data = api.getLocation();

console.log(api_data);

Метод getLocation следующий, который возвращает некоторый ответ / данные. Однако эти данные теоретически были бы вызовом извлечения API, например, getTestVariable, который ждет некоторое время ...

class Api {
  getLocation = async () => {
    var response = await this.getTestVariale();
    console.log(response);
    return response;
  }


  getTestVariale = () =>{
    setTimeout(function(){
      console.log("timeout done...");
      return "this is the test variable";
    },2000);
  }
 }

Тем не менее, 1) console.log (response) выдает «undefined», потому что он не ожидает ... и 2) обратно в основной js, api_data при входе в систему, является некоторым объектом Promise, а не переменной response

Answer 1

В getLocation вы await для значения, которое будет взято из this.getTestVariable. Чтобы это работало this.getTestVariable , необходимо вернуть Обещание; это можно сделать двумя способами - сделать getTestVariable функцией async или явно вернуть Обещание.

Поскольку вы используете setTimeout (что не является async функцией), вы обязательно должны использовать Promise. Вот, пожалуйста:

class Api {
  async getLocation() {
    return await this.getTestVariable();
  }

  getTestVariable() {
    return new Promise((res, rej) => {
      setTimeout(() => res('test'), 2000)
    });
  }
}

async function main() {
  let api = new Api;

  console.log('Trying to get the location...');
  console.log('Voila, here it is: ', await api.getLocation());
}

main();

Выглядит довольно некрасиво, но вы не сможете достичь этого, если используете установленное время ожидания.

Суть в разрешении getTestVariable со значением, которое вы хотите вернуть.

Довольно важное замечание: вы можете пометить getTestVariable как функцию async, это даст дополнительный уровень Обещания, но вы все равно получите желаемый результат.

Answer 2

Как сказано выше, setTimeout не возвращает Promise, поэтому getTestVariable не имеет возвращаемого значения.

Вот немного измененная версия вашего кода, которая, мы надеемся, поможет вам выбрать правильный путь:

class Api {
  getLocation = async () => {
    var response = await this.getTestVariale();
    console.log(response);
    return response;
  }


  getTestVariale = () => {
      return new Promise((resolve, reject) => {
          if (thereIsError)
              reject(Error('Error message'));
          else 
              resolve({foo: 'bar'});
      }
  }
}

Оставьте комментарий, если мне нужно объяснить дальше, я был бы рад.