Asynchroniczność w js

Question

Cześć, 

próbuję napisać metodę która zwróci mi wyniki kilku zapytań w postaci tablicy. Problem polega na tym, że całość metody zdąży się wykonać zanim przyjdą odpowiedzi i zostaną zapisane do tablicy w związku z czym funkcja zwraca pustą tablicę. Proszę o pomoc 

 

 function getData(_userIDs, _type, _pattern) {
    return new Promise( async function (resolve, reject)
    {
        var tab = [];
        const oauth =
            {
                consumer_key: 'ypvKtBzSXFcKsu37MhWt',
                consumer_secret: 'ZD343443434334ftuXMzEV',
                token: 'R643434434kG4fKVRr',
                token_secret: 'Xx433434343434LXauKHCdBY563zzLq'
            }
            , url = 'https://dffdfdfdfdfdfdfdfd';

        for (var i = 0; i < Object.keys(_userIDs.items).length; i++) {
            const qs = {
                user_id: _userIDs.items[i].user.id,
                fields: _pattern
            }

           const x=  await request.get({ url: url, oauth: oauth, qs: qs, json: true }, function (e, r, user) {
                if (e) {
                    console.log("Blad!");
                    return;
                }
                
                else {
                    tab.push(user);
                    // console.log(user);
                    console.log("Iteracja : " + i);            
                }

            });
         
        }
        resolve(tab);
    });
    
}

 

Answer 1

Ciężko stąd wyczytać, co dokładnie ma robić kod, ale będę zgadywał. Zgaduję, że `_userIDs.items` jest tablicą (jeśli nie, to dość łatwo można poprawić moje przykłady)

Ogólnie dość mocno tu pomieszałeś rzeczy. Jeśli używasz Promise, to dość dziwne jest, że funkcja w środku też jest asynchroniczna. Dziwne też, że `request.get` używasz z await, ale też przekazujesz mu callbacka - zazwyczaj robi się albo jedno, albo drugie. Skoro mówisz, że funkcja się kończy zbyt szybko, to zgaduję, że `request.get` jest callbackowe.

W każdym razie, skoro chcesz zrobić kilka zapytań, a getData ma zwrócić Promise z tablicą z pobranymi danymi, dobrymi narzędziami będą prawdopodobnie .map() (żeby zamienić listę userów na zapytania) i Promise.all (które zaczeka aż wszystkie zapytania się zakończą i spakuje wynik w listę).

Zrobiłbym to tak (na sucho, więc możliwe że z błędami). Jeśli `request.get` zwraca promise:

function getData(_userIDs, _type, _pattern) {
    const oauth = "...";
    const url = "...";

    const promises = _userIDs.items.map(item => {
        const qs = {
            user_id: item.user.id,
            fields: _pattern
        };

        return request.get("...");
    });

    return Promise.all(promises);
}

A jeśli jest callbackowe, to jest trochę trudniej, bo trzeba opakować callback w promise. Można by też dla porządku wrzucić to w osobną funkcje, ale tu tego nie zrobiłem:

function getData(_userIDs, _type, _pattern) {
    const oauth = "...";
    const url = "...";

    const promises = _userIDs.items.map(item => {
        const qs = {
            user_id: item.user.id,
            fields: _pattern
        };

        return new Promise((resolve, reject) => {
            request.get("...", (e, r, user) => {
                if (e) {
                    reject("...");
                    return;
                }
                resolve(user);
            });
        });
    });

    return Promise.all(promises);
}

 

Comments

Dziękuję za bardzo wyczerpującą i pouczającą odpowiedź ! Udało mi się osiągnąć to co chciałem. Poniżej umieszczam kod który poprawiłem.

function getData(_userIDs, _type, _pattern) {
        const oauth =
            {
                consumer_key: 'ypvdsKsu37MhWt',
                consumer_secret: 'ds',
                token: '3KndsAcEwh8Yt',
                token_secret: 'DYfc3dsJT6FPsUrTbvFd'
            }
          , url = 'https://sddsdsdser';

      const promises = _userIDs.items.map(item => {
          const qs = {
              user_id: item.user.id,
              fields: _pattern
          }
          return new Promise((resolve, reject) => {
              request.get({ url: url, oauth: oauth, qs: qs, json: true }, (e, r, user) => {
                  if (e) {
                      reject("...");
                      return;
                  }
                  resolve(user);
              });
          });
    });

      return Promise.all(promises);
}

 

Answer 2

Asynchroniczny kod w Js mozesz pisac na wiele sposobow:

1 Callbacks 

request.get({  }, function (e, r, user) {

// callback function here

})

2. Promise

var getData = new Promise(function(resolve, reject) {
  setTimeout(resolve, 100, 'foo');
});

getData.then(e =>console.log(e))

3. Async/Await 

async function getData() {
  var result = await request.get();
  return result
}

getData();

W twoim przypadku probujesz uzyc wszystkich tych metod jednoczesnie.

Najpierw zdecyduj ktorego z rozwiazan uzyjesz i nie mieszaj go z innymi.

Na przyklad

const getData = async (users: Array<User>) => Promise.all(users.map(request.get))

getData().then(usersData => console.log(usersData))

Edit: dodanie Promise.all,  uproszczenie map()

Comments

getData().then

(to nie zadziała, bo Twój map() zwrócił tablice promise'ów. Potrzebujesz Promise.all. Poza tym, `async user => await request.get(user)` można bezpośrednio zastąpić przez samo request.get(user) - które zwróci promise robiący to samo)