Przypisane wartość obiektu promise do zmiennej ?

Question

Od niedawna zacząłem się bawić w javascript. Poczytałem o obiektach Promise i callback.  Chce zwrócić wartość z funkcji getGroupsByIdUser() i przypisać jej wartość do zmiennej userGroups. Istotny jest ten kawałek kodu:

  

var userGroups;
      getGroupsByIdUser(userId).then(result=>{ userGroups=result});
      console.log(userGroups);

Niestety zwraca mi underfinde. Za pomoc w rozwiązaniu problemu z góry dziękuj

Pierwsza funkcja:

function getGroupsByIdUser(userId) {
      /*parentEl = $(this).parent().parent();
      userId = parentEl.attr('data-user-id');*/
      return new Promise(function (resolve, reject) {
          var requestUrl = apiRoot + 'users';
          $.ajax({
              url: requestUrl + '/?' + $.param({
                  id: userId
              }),
              method: "GET",
              contentType: 'application/json',
              success: function (data) {
                   resolve(data);
              }

          })
      })

  }

Druga funkcja:

function handleUserUpdateRequest() {

      var parentEl = $(this).parent().parent();
      var userId = parentEl.attr('data-user-id');
      var userFirstName = parentEl.find('[data-user-firstName-input]').val();
      var userLastName = parentEl.find('[data-user-lastName-input]').val();
      var userPassword = parentEl.find('[data-user-password-input]').val();
      var userBirthdate = parentEl.find('[data-user-birthDate-input]').val();
      var requestUrl = apiRoot + 'users';
      var userGroups;
      getGroupsByIdUser(userId).then(result=>{ userGroups=result});
      console.log(userGroups);


      $.ajax({
          url: requestUrl,
          method: "PUT",
          processData: false,
          contentType: "application/json; charset=utf-8",
          dataType: 'json',
          data: JSON.stringify({
              id: userId,
              firstName: userFirstName,
              lastName: userLastName,
              password: userPassword,
              birthDate: userBirthdate,
              userOfGroupDtos: userGroups


              success: function (data) {
                  parentEl.attr('data-user-id', data.id).toggleClass('datatable__row--editing');
                  parentEl.find('[data-user-firstName-paragraph]').text(userFirstName);
                  parentEl.find('[data-user-lastName-paragraph]').text(userLastName);
                  parentEl.find('[data-user-password-paragraph]').text(userPassword);
                  parentEl.find('[data-user-birthDate-paragraph]').text(userBirthdate);
              }
          })

  });
  }

 

Answer 1

Ponieważ nie zrozumiałeś idei asynchroniczności promise'ów.

      var userGroups;
      getGroupsByIdUser(userId).then(result=>{ userGroups=result});
      console.log(userGroups);

Kluczowym tutaj jest, że druga linia opisuje co się stanie w "przyszłości", gdy zapytanie ajaxowe zwróci jakąś wartość. Różnica polega na tym, że kod idzie dalej do przodu, nie czekając - można powiedzieć, że druga linia złożyła zamówienie i idzie dalej nie czekając na jego zakończenie.

To trochę tak, jakby powiedzieć: "włożę ubrania do pralki, a jak pralka skończy, włożę je na suszarkę" ale od razu po włączeniu pralki patrzysz na suszarkę i dziwisz się, czemu jest pusta.

Jeśli chcesz, żeby coś się stało po otrzymaniu odpowiedzi na zapytanie ajaxowe, musisz cały ten kod umieścić w `.then()`.

Comments

A na boku, używając składnię async/await, można ten .then() "schować" i dostać kod przypominający synchroniczny:

async function handleUserUpdateRequest() {
  // ...
  let userGroups = await getGroupsByIdUser(userId);
  console.log(userGroups); // dziala
  // ...
}

 

---

@adrian17, Jak włozysz ubrania prosto z pralki do szafy to zatęchną

---

Poprawiłem.