Javascript Angular异步表单验证程序-如何等待getDistanceMatrix回调的响应

我有一个带有deliveryAddress字段的被动表单，该字段有一个自定义异步验证器。我使用GooglePlacesAPI检查距离

但是，API需要回调来获取响应。这在我的异步验证器中导致了一个问题，因为我不知道如何从对外部函数的回调中获取响应

我使用响应来解析回调中的距离。根据距离，该字段有效或无效

谷歌地图API文档

this.orderObject=this.fb.group({
deliveryAddress:[''[Validators.required]，this.validDeliveryAddress.bind（this）]
});
异步validDeliveryAddress（控件：AbstractControl）{
const origin2=这家餐厅的服装；
const service=new google.maps.DistanceMatrixService（）；
let resp=wait service.getDistanceMatrix({
起源：[原文2]，
目的地：[control.value]，
travelMode:google.maps.travelMode.DRIVING，
unitSystem:google.maps.unitSystem.IMPERIAL，
//在执行完成后，如何在外层获得响应？
}，异步（响应，状态）=>{
resp=等待此。handlemappresponse（响应，状态）；
控制台日志（'resp'，resp）；
返回响应；
});
控制台日志（'resp'，resp）；
//端外部函数
}
//这里的回调函数
异步handleMapResponse（响应、状态）：承诺{
让我们离开；
让我们来；
让持续时间；
让距离：字符串；
//如果为true，则表示尚未发送有效地址
if（响应.目的地址包括（“”））{
console.log（'还没有有效的地址'）
返回{
validAddress：没错
};
}
if（status==google.maps.DistanceMatrixStatus.OK）{
console.log（'status ok'）；
让origins=response.originAddresses；
让destinations=response.destinationaddress；
console.log（'origins'，origins）；
console.log（'destinations'，destinations）；
for（设i=0；i}否则，如果（parseFloat（distance），您可以将响应转换为承诺并等待

async validDeliveryAddress(control: AbstractControl) {
  const origin2 = this.restaurantAddress;
  const service = new google.maps.DistanceMatrixService();

  const {response, status} = await new Promise(resolve => 
    service.getDistanceMatrix({
      origins: [origin2],
      destinations: [control.value],
      travelMode: google.maps.TravelMode.DRIVING,
      unitSystem: google.maps.UnitSystem.IMPERIAL,
    }, (response, status) => resolve({response, status}))
  );

  const resp = await this.handleMapResponse(response, status);
}

你可以把回应变成承诺，然后等待

async validDeliveryAddress(control: AbstractControl) {
  const origin2 = this.restaurantAddress;
  const service = new google.maps.DistanceMatrixService();

  const {response, status} = await new Promise(resolve => 
    service.getDistanceMatrix({
      origins: [origin2],
      destinations: [control.value],
      travelMode: google.maps.TravelMode.DRIVING,
      unitSystem: google.maps.UnitSystem.IMPERIAL,
    }, (response, status) => resolve({response, status}))
  );

  const resp = await this.handleMapResponse(response, status);
}

不太清楚你为什么做了
handleMapResponse
async
。它还是被同步调用的。另外，它的任务是确定你是否需要显示错误。你能分享你的
服务实现吗。getDistanceMatrix
不太清楚你为什么做
handleMapResponse
async
。无论如何它都会被同步调用。另外，它的任务是确定您是否需要显示错误。请您分享一下
服务的实现。getDistanceMatrix
您好，谢谢，这很有效！不过，我不太懂语法。您能帮我理解吗？1）为什么我们需要const{response，status}=…？它只是一个占位符吗？我们可以用just wait new Promise（resolve=>…？2）是const{response，status}这行中发送的内容吗？const resp=wait this.handlemappresponse（response，status）；谢谢！当然，当调用
resolve
时，我传入一个对象
{response，status}
，它是
{response:response，status:status}
的缩写。这是wait的返回值。通常，您会写：
const returnedObj=wait new Promise….；const response=returnedObj.response；const status=returnedObj.status
。解构语法
const{response，status}=等待新承诺…
正是这样做的。嗨，谢谢，成功了！不过，我不太懂语法。你能帮我理解吗？1）为什么我们需要const{response，status}=…？它只是一个占位符吗？我们能用just wait new Promise（resolve=>…）来做吗？2）是const{response，status}这行中发送了什么？const resp=等待。handlemappresponse（响应，状态）；谢谢！当然，在调用
resolve
时，我传入了一个对象
{response，status}
，它是
{response:response，status:status}的缩写
。这是wait的返回值。通常，您会编写：
const returnedObj=wait new Promise…；const response=returnedObj.response；const status=returnedObj.status
。解构语法
const{response，status}=wait new Promise…
正是这样做的。