Async / Await不等待响应，并返回Promise对象

Question

使用ES6，Classes和Async / 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（响应）给出“未定义”，因为它不等待...和2）回到主js，记录时api_data，是一些Promise对象而不是变量响应

Answer 1

正如上面的评论所述，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'});
      }
  }
}

如果我需要进一步解释，请发表评论我很乐意。

Answer 2

在getLocation你await的价值将来自this.getTestVariable。为了使这个工作，this.getTestVariable必须返回一个承诺;它可以通过两种方式完成 - 使getTestVariable成为async函数或明确返回Promise。

既然你正在使用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();

看起来很难看，但是如果你使用set timeout，就无法实现它。

重点是getTestVariable的分辨率，你希望它返回的价值。

相当重要的一句话：你可以将getTestVariable标记为async函数，它会增加一个额外的Promise级别，但你仍然会得到所需的结果。