Forum PHP.pl > Obiekt promise zwrócić do zmiennej w zapytaniu ajax

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Obiekt promise zwrócić do zmiennej w zapytaniu ajax

Forum PHP.pl > Forum > Po stronie przeglądarki

silverwind

1.05.2018, 12:15:04

Jak wstawić dane z promise obiektu. Zmienna zwraca obiekt promise var userGroups = getGroupsByIdUser(userId); Chce go wstawić do userOfGroupDtos. Próbowałem coś takiego

[JAVASCRIPT] pobierz, plaintext 
userGroups.then(function (result){
          userOfGroupDtos:result
      });
      }),
[JAVASCRIPT] pobierz, plaintext

ale jest error statment

[JAVASCRIPT] pobierz, plaintext 
$.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:
 
[JAVASCRIPT] pobierz, plaintext

LowiczakPL

2.05.2018, 06:43:51

Proponuję 2 rozwiązania, przypisać do jakiejś metody.

[PHP] pobierz, plaintext 
 
    userOfGroupDtos.metoda = result;
[PHP] pobierz, plaintext

albo połączyć razem jeśli są to 2 takie same typy danych.

[PHP] pobierz, plaintext 
 
    userOfGroupDtos.concat(result);
[PHP] pobierz, plaintext

silverwind

2.05.2018, 08:44:24

Co to znaczy do jakieś metody? . Nie idzie jakoś normalnie wartość tego obiektu zwrócić Dopiero zacząłem się uczyć Javascript. Czytałem o promise i callback ale nigdzie nie znalazłem jak użyć zwracaną wartość tego obiektu.

SmokAnalog

2.05.2018, 09:19:09

Musisz skorzystać ze zmiennej, która jest dostępna w tym zasięgu, na przykład:

[JAVASCRIPT] pobierz, plaintext 
let userOfGroupDtos;
 
userGroups.then(result => {
    userOfGroupDtos = result;
});
[JAVASCRIPT] pobierz, plaintext

silverwind

2.05.2018, 10:54:30

Cytat(SmokAnalog @ 2.05.2018, 10:19:09 )

Musisz skorzystać ze zmiennej, która jest dostępna w tym zasięgu, na przykład:

[JAVASCRIPT] pobierz, plaintext 
let userOfGroupDtos;
 
userGroups.then(result => {
    userOfGroupDtos = result;
});
[JAVASCRIPT] pobierz, plaintext

Próbowałem już tego rozwiązania ale chyba czegoś jeszcze nie wiem na temat javascript, ponieważ ta zmienna się nie zapisuje w takim układzie jak poniżej. Jest w console.log(userGroups) undefined

[JAVASCRIPT] pobierz, plaintext 
 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();
      let  userGroups;
          getGroupsByIdUser(userId).then(result=>{userGroups=result});
      console.log(userGroups);
      var requestUrl = apiRoot + 'users';
 
      $.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,
 
 
              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);
              }
          })
 
  });
  }
[JAVASCRIPT] pobierz, plaintext

SmokAnalog

4.05.2018, 12:16:00

Działałoby Ci, gdyby callback dla Promise nie wykonywał się asynchronicznie. Zamień sobie dla testu to:

[JAVASCRIPT] pobierz, plaintext 
console.log(userGroups);
[JAVASCRIPT] pobierz, plaintext

na to:

[JAVASCRIPT] pobierz, plaintext 
setTimeout(() => {console.log(userGroups);}, 3000);
[JAVASCRIPT] pobierz, plaintext

Zobaczysz, że tutaj już userGroups będzie miało tę wartość z callbacka dla Promise.

bael

4.05.2018, 21:02:17

Wszystko co znajduje się w handleUserUpdateRequest poza tym fragmentem:

Kod

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

jest wykonywane synchronicznie. Czyli cały kod wykonuje się linijka za linijką jak leci. Wszystko co znajduje się po 'then' wykonywane jest asynchronicznie. Ten fragment kodu reprezentuje moment w czasie kiedy dane (result) są już dostępne. Promise jest po to żeby JS wiedział, że może sobie wykonać wszystko co ma zrobić w ramach handleUserUpdateRequest ale pewne dane reprezentowane jako obiekt Promise będą dostępne później. Później może być za sekundę, minutę itd. handleUserUpdateRequest nie może czekać, ponieważ wykonuje się synchronicznie. Gdyby handleUserUpdateRequest miał czekać na te dane, to skrypt musiałby się zatrzymać do momentu aż dane (result) będą dostępne. Oczywiście tego nie chcemy. Żeby 'udać się' do momentu w czasie w którym dane są już dostępne i zrobić cokolwiek z tymi danymi musisz zrobić to w tym miejscu:

Kod

getGroupsByIdUser(userId).then(result=>{
// do something special with asynchronous data here!
});

To co Ty robisz to przypisujesz result do zmiennej userGroups ale zauważ, że dzieje się to w momencie kiedy dane są dostępne, a nie wtedy kiedy wykonywana jest reszta kodu, który jest synchroniczny. Ta część, która jest synchroniczna już dawno się wykonała, więc poza tym przypisaniem nic się już więcej nie zadzieje.

Jak sobie z tym radzić?
1. Możesz użyć callback'u czyli wcześniej zdefiniować sobie sposób postępowania w momencie kiedy dane będą już dostępne:

Kod

getGroupsByIdUser(userId).then(result=>{
// doSomethingSpecialWithAsynchronousData(result);
});

W bardziej zaawansowanej wersji możesz obsłużyć to eventem, który będzie emitowany w momencie kiedy dane będą dostępne.
2. Jeżeli nie przepadasz za asynchroniczną składnią, możesz użyć specjalnej składni async/await, która powoduje to że kod wygląda jakby był pisany synchronicznie ale jest asynchroniczny.

SmokAnalog

5.05.2018, 22:07:43

Napisanie pierwszego posta zajęło Ci 8 lat

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.