0

Fala pessoal,

Estou consumindo a API do Trello para recuperar itens de checklists específicos de cards de um quadro. Sendo assim estou fazendo o seguinte caminho.

  1. Recupero informações do quadro
  2. Recupero informações das listas do quadro
  3. Recupero os cards destas listas
  4. Recupero os checklists destes cards

A API está retornando tudo certinho, porém estou com dificuldades de entender quando e onde usar o async/await para realizar essas tarefas.

Seguem os fragmentos do código:

onAuthorize = async () => {
    console.log('onAuthorize');

    try {
        await this.getBoardInfo();
        await this.getListsInfo();

    } catch (err) {
        console.error(err);
    }
}

getBoardInfo = async () => {
    console.log('getBoardInfo');

    const self = this;

    await window.Trello.get(`boards/${this.state.boardId}?fields=id,name&lists=open&list_fields=id,name,closed,pos`,
        (boardInfo) => {
            console.log('getBoardInfo <<', boardInfo);
            self.setState({ boardInfo });
        }
    );
}

getListsInfo = async () => {
    console.log('getListsInfo');

    let { boardInfo } = this.state;
    let self = this;

    for (const [idx, list] of boardInfo.lists.entries()) {
        console.log('getListsInfo >>>', idx, list);
        await window.Trello.get("lists/" + list.id + "/cards?fields=id,name",
            (cards) => {
                if (typeof cards !== 'undefined') {
                    console.log('getListsInfo <<<', idx, cards);
                    // boardInfo.lists[idx]['cards'] = self.getCardsInfo(cards);
                } else {
                    console.warn(`Lista ${list.name} vazia sem cards`);
                }
            }
        );

    };
}

getCardsInfo = async (cards) => {
    console.log('getCardsInfo', cards);

    if (!cards) {
        return [];
    }

    for (const [idx, card] of cards.entries()) {
        await window.Trello.get("cards/" + card.id + "/checklists?fields=id,name,checkItems",
            (checklists) => {
                console.log('getCardsInfo <<');
                cards[idx]['checklists'] = checklists;
            }
        );
    };

    return cards;
}

O getListsInfo como está retorna certinho, uma lista por vez, porém não consigo fazer que ele vá 1 por 1 buscando os cards fazendo o aninhamento corretamente.

O objetivo final é que o boardInfo fique populado com todas as informações que estou buscando.

1 Resposta 1

1

O async/await não é "respeitado" dentro de loops, seja como for, foreach ou até mesmo em .map() de arrays.

Uma solução para contornar isso, é usar Promises para realizar os loops, e, a promise sendo async, consegue-se utilizar await dentro dele. Segue um exemplo de como pode ser feito:

   const promises = getCardsInfo.map(
  cards =>
    new Promise(async resolve => {
      if (!cards) {
        return [];
      }

      for (const [idx, card] of cards.entries()) {
        await window.Trello.get("cards/" + card.id + "/checklists?fields=id,name,checkItems",
          (checklists) => {
            console.log('getCardsInfo <<');
            cards[idx]['checklists'] = checklists;
          }
        );
      };

      resolve(cards);
    })
);

await Promise.all(promises);
1
  • 1
    Entendi a abordagem, porém não vai valer a pena seguir nesse esquema, valeu!
    – Russ_AB
    Commented 28/01/2020 às 2:09

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .