Como ficaria caso tivesse múltiplas requests na mesma página?

Oi Pierre, tudo bem?

Nessa situação, uma abordagem seria armazenar as requests pendentes em algum lugar enquanto uma request de token está em andamento. Assim, quando a request de token estiver concluída, você poderia então processar essas requests pendentes com o novo token.

Vamos a um exemplo prático. Você poderia criar um array para armazenar as requests pendentes e uma variável para armazenar a promise da request de token, algo como:

let isRefreshing = false;
let failedQueue = [];

A variável isRefreshing será usada para verificar se uma request de token está em andamento. O array failedQueue armazenará as requests pendentes.

Agora, quando uma request falhar devido a um token inválido, você pode adicionar uma nova promise ao failedQueue e verificar se uma request de token já está em andamento. Se não estiver, você inicia uma. Aqui está um exemplo de como você poderia fazer isso:

const processQueue = (error, token = null) => {
  failedQueue.forEach(prom => {
    if (error) {
      prom.reject(error);
    } else {
      prom.resolve(token);
    }
  });

  failedQueue = [];
};

const refreshToken = () => {
  if (isRefreshing) {
    return new Promise((resolve, reject) => {
      failedQueue.push({resolve, reject});
    });
  }

  isRefreshing = true;

  return new Promise((resolve, reject) => {
    requestNewTokenFromServer()
      .then(newToken => {
        isRefreshing = false;
        processQueue(null, newToken);
        resolve(newToken);
      })
      .catch(err => {
        isRefreshing = false;
        processQueue(err, null);
        reject(err);
      });
  });
};

No código acima, requestNewTokenFromServer é uma função que você precisaria implementar para fazer a request de token. A função refreshToken verifica se uma request de token já está em andamento. Se estiver, ela retorna uma nova promise que será resolvida quando a request de token estiver concluída. Se não estiver, ela inicia uma request de token e processa a fila de requests pendentes quando a request de token estiver concluída.

Espero que este exemplo te ajude a entender como você pode gerenciar múltiplas requests na mesma página e garantir que elas não tentem buscar novos tokens ao mesmo tempo. Lembre-se, esta é apenas uma abordagem e pode não ser perfeita para todas as situações, mas é um bom **ponto de partida. **

Um abraço e bons estudos.