在遍历时多次调用异步方法,遇到的坑。
通过接口拿到的数组中,每一个对象里只有经纬度,并没有页面中需要展示的具体地理信息。
前端处理,将具体的地理信息渲染到页面。
利用PositionConversion 函数将经纬度转换成具体地理位置信息。
下图为控制台打印的结果。
可以在控制台打印出转换为具体信息的数组,但是无法通过 length,索引 等方式拿到数组中的值。
经过痛苦的折磨后,才发现 PositionConversion() 方法使用回调函数来处理地理编码操作的结果,这是因为地理编码操作是异步的,可能需要一些时间才能完成。
下方代码成功解决了这个问题。通过 async await 结合 promise.all
async updatedList() {
const positionArr = this.showDialogList.map((item) => {
return this.PositionConversion(item.lon, item.lat);
});
const myArr = await Promise.all(positionArr);
this.toileInfo = this.showDialogList;
// 把myArr中的每一项,按顺序 放到 toileInfo 里
this.toileInfo.forEach((item, index) => {
item.position = myArr[index];
});
},
// 将经纬度转换成具体位置信息
PositionConversion(lng, lat) {
let position = [lng, lat]; //位置的经纬度
return new Promise((resolve, reject) => {
new AMap.plugin("AMap.Geocoder", () => {
const geocoder = new AMap.Geocoder({
city: "028",
});
geocoder.getAddress(position, (status, result) => {
if (status === "complete" && result.info === "OK") {
// result为对应的地理位置详细信息
this.place = result.regeocode.formattedAddress;
resolve(result.regeocode.formattedAddress);
}
});
});
});
},
我个人简单的理解,经纬度转换为具体位置信息是一个异步的过程。
我使用map方法,多次调用 PositionConversion 方法。所以需要promise.all来得到遍历后的总结果。
结合 async await 拿到promise.all的返回值,后续再进行其他处理。
原文链接:https://juejin.cn/post/7225139862222946362 作者:划水鸢