1

Eu tenho uma função que deveria checar se um usuário está inscrito no Stripe. Para isso é feita uma requisição para um servidor terceiro que retorna um array de usuários.

Quando eu faço a requisição, uma promessa é retornada: Promise {state: 'pending'}. Para resolver isso eu fiz o seguinte:

fetch(url, { method: 'POST' }).then(async (res) => {
  await res.json()
  // Código executa perfeitamente como desejado dentro desse bloco...
});

Porém, isso cria um problema: Como o fetch está envolvido em uma função (function M() { fetch(...) }) e não é possível retirar o valor de dentro da promessa sem um then, como faço para que M retorne a resposta do fetch?

Meu código completo:

checkUserSubscription: (email) => {
        var response ={status: 'inactive'}
        
        const costumers = fetch(`url/payment/list`, {method: 'POST'})
        .then(async(res) => {
           let costumers = await res.json()
           return costumers
        })
        console.log(costumers) //Promise {state: 'pending}, mas com fullfiled e value
        for (var costumer in costumers) {
            if (costumers[costumer].email == email) {
                response = {
                    email: email,
                    id: costumers[costumer].id,
                    status: 'active'
                }                
            }
        }

        return response // {status: 'inactive'}
    }

Resposta:

inserir a descrição da imagem aqui

5
  • Vale acrescentar que a Promise retornada não é acessível, por exemplo em: essaPromise.value 3/02/2021 às 21:20
  • 2
    Não lute contra a natureza assíncrona do JavaScript, é uma guerra que estará sempre fadada ao fracasso. Ao invés disso, abrace o assincronismo da linguagem. Nesse caso, isso significa que a sua função M (por exemplo) deve retornar a promessa (ou uma nova promessa, derivada daquela originada no fetch). 3/02/2021 às 21:25
  • @LuizFelipe eu não estou tentando lutar, apenas fique um pouco confuso pois já lidei com fetch, mas isso nunca tinha acontecido antes. Você poderia deixar mais claro através de código o que você quer dizer? 3/02/2021 às 21:37
  • Sua função checkUserSubscription é que deveria ser async e então, você espera (await) que a promise retornada no fetch seja resolvida. Sem muitos detalhes: checkUserSubscription: async () => { /* ... */ customers = await fetch().then(res => res.json)) 3/02/2021 às 21:44
  • @PedroCamaraJunior 👍 Vou tentar isso 3/02/2021 às 21:46

1 Resposta 1

3

Conforme disse nesta outra resposta, o JavaScript possui uma natureza intrinsecamente assíncrona. Além disso, uma vez que uma função trabalha com alguma operação assíncrona, o chamador da função precisa se adequar ao assincronismo também.

Essa adequação do chamador pode ocorrer de duas formas principais:

  • Callback, que é o modo antigo de lidar com assincronismo no JavaScript;
  • Promessa, que é o modo recomendado de se lidar com assincronismo em código JavaScript atual.

Tratarei nessa resposta exclusivamente sobre promessas, mas ideias similares podem ser aplicadas com callbacks.


Uma vez que uma função que realiza operação assincrona em JavaScript é chamada, o chamador precisa lidar com o assincronismo. E isso, tendo em vista que operações assíncronas demandam tempo para serem resolvidas, implica que o código chamador precisa "aguardar" pela conclusão da operação.

No caso de promessas, isso é feito com o then.

No caso de você implementar uma função que utiliza operação assíncrona e garantir que o chamador da sua função também espere pela conclusão do processo, você deve retornar a promessa. Não adianta tentar "remover o valor de uma promessa", porque isso não é possível (de forma a evitar gambiarras). Discuto mais sobre isso em Como atribuir o resultado de uma promise a uma variável?.

O que você precisa fazer é retornar a promessa. Desse modo, o código que chamar a sua função poderá utilizar o then (ou await, se for função assíncrona) para aguardar pela resolução da sua função.

Abaixo deixo um exemplo para demonstrar:

// Função que chama a API do GitHub para determinar
// o número de repositórios públicos de um usuário.
function getRepoCount(username) {
  const promise = fetch(`https://api.github.com/users/${username}`)
    .then((response) => response.json())
    .then((json) => {
      return `O usuário ${json.login} tem ${json.public_repos} repositório(s).`;
    });
    
  // Note que eu estou retornando a promessa.
  // Assim, quem chamar esta função poderá utilizar o `then` (ou `catch`) na promessa que retornamos.
  return promise;
}

// Função que chama:
function main() {
  getRepoCount('lffg')
    .then((message) => console.log('Mensagem recebida: ' + message))
    .catch((error) => console.log('Whoops! Algo deu errado!: ' + error.message));
}

main();

Note, no código acima, que a função getRepoCount que implementei realiza operação assíncrona. Desse modo, como podemos fazer para que aqueles que chamarem getRepoCount estejam cientes de quando a operação tiver sido completa? A resposta é: Retornando a promessa!

Assim, você garante que todos os chamadores da função possam lidar com a promessa, o que significa aguardar a resolução (Promise.prototype.then) ou lidar com eventuais erros (Promise.prototype.catch ou segundo argumento de then). :)


No seu caso (e com algumas melhorias no código), ficaria algo mais ou menos assim:

function checkUserSubscription(email) {
  return fetch(`url/payment/list`, { method: 'POST' })
    .then((response) => response.json())
    .then((costumers) => {
      // Note que, de dentro da promessa, podemos retornar qualquer valor.
      // Nesse caso, estamos retornando o resultado da operação
      // `Array.prototype.find`, que, neste caso, irá procurar, dentro do array
      // `customers`, o usuário com o e-mail fornecido.
      //
      // O valor que retornamos de dentro dessa promessa será passado para a
      // promessa que a função `checkUserSubscription` retorna.
      return costumers.find((customer) => customer.email === email);
    });
};

checkUserSubscription('[email protected]')
  .then((customer) => {
    // `customer` será o objeto de `customers` referente ao e-mail.
    // Caso não existir o usuário com o e-mail fornecido no array, `customer`
    // será `undefined`. Esse comportamento se deve ao `Array.prototype.find`.
    console.log(customer);
  })
  .catch((error) => {
    // Trate o eventual erro.
  });

E, claro, pode utilizar funções assíncronas para simplificar um pouco:

async function checkUserSubscription(email) {
  const response = await fetch(`url/payment/list`, { method: 'POST' });
  const costumers = await response.json();

  // Pode parecer que estamos retornando "somente" o consumidor a ser encontrado,
  // mas, na verdade, estamos retornando uma promessa. Isso ocorre porque,
  // implicitamente, TODA função assincrona retorna uma promessa.
  //
  // E, como dito acima, o que precisa ser feito para que o chamador esteja
  // "ciente" do assincronismo da função que chamou é RETORNAR A PROMESSA.
  return costumers.find((customer) => customer.email === email);
}

// Note que nada muda na interface do chamador. Funções assíncronas são,
// basicamente, açúcar sintático para operações comuns relacionadas a promessas.
checkUserSubscription('[email protected]')
  .then((customer) => {
    console.log(customer);
  })
  .catch((error) => {
    // Trate o eventual erro.
  });

Como sugestão, procure entender profundamente sobre promessas, que são essenciais para o domínio do JavaScript. Além disso, saber sobre funções assíncronas pode também ser útil. Recomendo:

1
  • Muito obrigado. Eu acabei identificando o erro mais tarde, mas, mesmo assim, sua resposta foi esclarecedora. 4/02/2021 às 16:27

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 .