如何在执行下一行代码之前完成 await subscribe 块?
How can I make the await subscribe block complete before executing next line of code?
我正在订阅 Google 地图 API 以根据地址提取坐标。我的理解是,通过等待订阅行,它应该等待该代码块完成,然后再转到以下行。
async getCoordinates(address) {
let url = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + encodeURIComponent(address) + '&key=' + environment.geocodeKey;
let lat;
let lng;
let coord: Coordinate;
await this.http.get(url).subscribe(data => {
let map = data.json() as Results;
lat = map.results[0].geometry.location.lat;
lng = map.results[0].geometry.location.lng;
console.log("inner lat is: " + lat)
});
console.log("outer lat is: " + lat)
coord = new Coordinate(lat, lng);
console.log("coord lat is: "+ coord.latitude)
return coord;
}
然而,当我 运行 应用程序时,我在控制台中看到:
outer lat is: undefined
coord lat is: undefined
inner lat is: 38.912799
这向我表明 await 块中的代码最后执行。没有 async/await 我得到了相同的结果。我怎样才能让订阅代码先执行并让其他代码等到我的 lat 和 lng 有值?现在它们只有订阅块内的值,但我不能在 like this answer suggests 内放置 return 行。
我读到 Angular 中的 await/async 与承诺和回调本质上是一样的。我已经通过使用 .then():
将此异步 getCoordinates 函数的结果视为一个承诺
service.getCoordinates(this.address).then(
(val) => this.coordinates = val,
(err) => console.log(err)
);
Angular 的 http 服务 returns 和 Observable
。您可以使用 rxjs toPromise
运算符将其转换为承诺:
import 'rxjs/add/operator/toPromise';
await this.http.get(url).toPromise().then()
...
我正在订阅 Google 地图 API 以根据地址提取坐标。我的理解是,通过等待订阅行,它应该等待该代码块完成,然后再转到以下行。
async getCoordinates(address) {
let url = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + encodeURIComponent(address) + '&key=' + environment.geocodeKey;
let lat;
let lng;
let coord: Coordinate;
await this.http.get(url).subscribe(data => {
let map = data.json() as Results;
lat = map.results[0].geometry.location.lat;
lng = map.results[0].geometry.location.lng;
console.log("inner lat is: " + lat)
});
console.log("outer lat is: " + lat)
coord = new Coordinate(lat, lng);
console.log("coord lat is: "+ coord.latitude)
return coord;
}
然而,当我 运行 应用程序时,我在控制台中看到:
outer lat is: undefined
coord lat is: undefined
inner lat is: 38.912799
这向我表明 await 块中的代码最后执行。没有 async/await 我得到了相同的结果。我怎样才能让订阅代码先执行并让其他代码等到我的 lat 和 lng 有值?现在它们只有订阅块内的值,但我不能在 like this answer suggests 内放置 return 行。
我读到 Angular 中的 await/async 与承诺和回调本质上是一样的。我已经通过使用 .then():
将此异步 getCoordinates 函数的结果视为一个承诺service.getCoordinates(this.address).then(
(val) => this.coordinates = val,
(err) => console.log(err)
);
Angular 的 http 服务 returns 和 Observable
。您可以使用 rxjs toPromise
运算符将其转换为承诺:
import 'rxjs/add/operator/toPromise';
await this.http.get(url).toPromise().then()
...