Подождите пока await / async вернется в Jquery

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. И обновляю объект продукта. Так как эта установка значений происходит через долгое время,Объект продукта обновляется позже, ко времени рендеринга страницы пользовательского интерфейса. Я хочу, чтобы значения этого параметра происходили, прежде чем делать что-либо еще в jquery.

Нужна помощь

Answer 1

Проблема в том, что forEach не будет ожидать асинхронного результата, и поэтому ваша первая функция возвращает обещание, которое немедленно разрешается, не дожидаясь завершения запросов.

Вот как исправить:

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

при использовании asyn / await в JQuery или angularjs или nodejs, используйте обещание. Обещание завершит процесс и вернет либо успех, либо неудачу. Затем выполните только следующие шаги. Перейдите по ссылкам ниже, и вы получите представление.

1. Современный асинхронный JavaScript с Async и Await
2. асинхронно и ожидайте в Javascript