Question

我是Jquery中等待/异步的新手。当我尝试在我的js文件中使用它时，它正在执行，但未按预期进行。

async updateProduct (product) {
    product.travelers.forEach((traveler, travelerOrder) => this.updateProductwithPassengerName(traveler) )
    return product
}


 async updateProductwithPassengerName (traveler) {
     const travelerId = traveler.profile_id;
     var body = await this.userServiceClient.request('/v2/users/' + travelerId  + '/info','GET')
     traveler.first_name = body.first_name
     traveler.last_name = body.last_name

     return traveler
   }


async request (path, method, body) {
    const options = {
      method: method,
      body: body,
      headers: this.headers(),
      credentials: 'same-origin'
    }
    const response = await fetch(this.relativeUrl(path), options)

    if (!response.ok) {
      throw new HttpError('Technical error occured', response.status)
    }
    return response.json().catch(function () {
      throw new HttpError('No results found', response.status)
    })
  }

这是3个功能。

traveler.first_name = body.first_name
traveler.last_name = body.last_name

这些不是以同步方式设置的（

之后

var body =等待this.userServiceClient.request（'/ v2 / users /'+ travelerId +'/ info'，'GET'）

。这些在安静了很长时间之后执行。

我在这里所做的是，我为每个旅行者设置了first_name和last_name。并更新产品对象。由于此值的设置是在很长时间之后发生的，因此在UI页面呈现时，产品对象将在以后更新。我希望在jquery中执行其他任何操作之前先执行此设置值。

寻求帮助

Answer 1

问题在于forEach不会等待异步结果，因此您的第一个函数将返回立即可解决的promise，而无需等待请求完成。

以下是纠正方法：

async updateProduct (product) {
    await Promise.all(product.travelers.map((traveler, travelerOrder) => this.updateProductwithPassengerName(traveler) ));
    return product
}

或者，如果主干网无法处理所有这些并发请求，则在发出下一个请求之前等待它们中的每个请求完成：

async updateProduct (product) {
    for (let traveler of product.travelers) {
        await this.updateProductwithPassengerName(traveler);
    }
    return product
}

Answer 2

在JQuery或angularjs或nodejs中使用asyn / await时，请使用promise。 Promise将完成该过程，然后返回成功或失败。然后只执行下一步。通过下面的链接，您会有所想法。

等待直到Jquery中的await / async返回

2 个答案: