运行异步函数之后的一个函数

Question

我正在 Angular 使用 HttpClient 并遇到以下问题：

我有以下功能可以在本地保存数据库中的金额

getAmount(){
this.httpClient.get('https://myfirebasedatabase.com/test.json').subscribe(
  (response)=>{
    this.amount = response['total'];
  },
  (error) => {
    console.log('error' + error);
  }
);
}

这个函数运行良好，但是当我尝试使用变量时 this.amount 它是未定义的

this.getAmount();
console.log(this.amount);     //output undefined

我试过 this.getAmount().then ... 但不能，因为它是 void 类型。我也尝试为 getAmount 创建一个承诺，但不能在订阅类型上使用 then()。

提前致谢。

Answer 1

您是否尝试过将客户端调用包装到一个异步函数中，这样您就可以在方法的主体中等待它的响应？例如。

const getAmountAsync = () => {
  return new Promise((resolve, reject) => {
        this.httpClient.get('https://myfirebasedatabase.com/test.json').subscribe(
        (response)=>{
            resolve(response['total'])
        },
        (error) => {
            reject(error)
        }
        );
})
}

//main body:

this.amount = await getAmountAsync()

Answer 2

要使用像 getAmount() 这样的异步服务，Angular 方法是 return 一个 Observable，它解析为您想要在订阅者中访问的值。通常的方法是不订阅服务调用，return 它可能在一些额外的 RxJs 管道之后：

getAmount(){
return this.httpClient.get('https://myfirebasedatabase.com/test.json')
    .pipe(
        pluck('total')   // same as map(response => response.total)
     );
}

然后在消费代码中，使用subscribe代替then：

this.getAmount().subscribe(total => { 
    this.amount = total;
    console.log(this.amount);
});

运行异步函数之后的一个函数

Run a function after async function

angular-promise

angular

angular-httpclient

运行 异步函数之后的一个函数

Run a function after async function

angular-promise

angular

angular-httpclient

运行异步函数之后的一个函数