How can I break this Javascript HTTP Infinite request loop after 3 requests?

Question

So I've 2 components, Token.jsx and httpRequest.jsx. Both of them call each other when the token expires and it goes into an infinite loop, I want to break the loop after 3 http erros.

export default function GenerateToken() {
  return new Promise(((resolve) => {
    const refreshToken = GetRefreshToken();
    const url = `${cloudFunctionURL}/users/auth/idtoken/refresh`;
    const headers = {
      'Content-Type': 'application/json',
    };
    const params = {
      refreshToken,
    };
    httpRequest.makeHTTPCall('post', url, headers, params).then((tokenObject) => {
      // Storing the idToken in localstorage
      // reactLocalStorage.set('PL_IdToken', tokenObject.idToken);
      StoreIdToken(`Id ${tokenObject.id_token}`);
      StoreUserId(tokenObject.user_id);
      StoreRefreshToken(tokenObject.refresh_token);
      resolve(tokenObject.id_token);
    });
  }));
}

// 2nd File

function makeHTTPCall(method, url, headers, params = null) {
  return new Promise((resolve, reject) => {
    headers.Authorization = GetIdToken();
    headers['Content-Type'] = 'application/json';
    qwest.setDefaultDataType('json');
    qwest.setDefaultOptions({
      headers,
    });

    // Make http request
    qwest[`${method}`](url, params)
      .then((xhr, response) => {
        resolve(response);
      })
      .catch((error, xhr) => {
        if (xhr.status === 401) { // IdToken expired
          GenerateToken().then(() => {
            resolve(GET(url));
          });
        }
        else {
          reject(error); // error
        }
      });
  });
}

Perhaps add a counter for the number of attempts? – jspcal Feb 18 '19 at 06:14 — jspcal, Feb 18 '19 at 06:14
Is `makeHTTPCall` used elsewhere? – CertainPerformance Feb 18 '19 at 06:16 — CertainPerformance, Feb 18 '19 at 06:16

CertainPerformance · Answer 1 · 2019-02-18T06:26:33.543

You can give both of them a parameter like tryCount, and increment it in one of the functions, rejecting once it reaches 2:

export default function GenerateToken(tryCount = 0) {
  return new Promise((resolve) => {
    const refreshToken = GetRefreshToken();
    const url = `${cloudFunctionURL}/users/auth/idtoken/refresh`;
    const headers = {
      'Content-Type': 'application/json',
    };
    const params = {
      refreshToken,
    };
    httpRequest.makeHTTPCall('post', url, headers, params, tryCount).then((tokenObject) => {
      // Storing the idToken in localstorage
      // reactLocalStorage.set('PL_IdToken', tokenObject.idToken);
      StoreIdToken(`Id ${tokenObject.id_token}`);
      StoreUserId(tokenObject.user_id);
      StoreRefreshToken(tokenObject.refresh_token);
      resolve(tokenObject.id_token);
    });
  });
}
// 2nd File

function makeHTTPCall(method, url, headers, params, tryCount) {
  return new Promise((resolve, reject) => {
    headers.Authorization = GetIdToken();
    headers['Content-Type'] = 'application/json';
    qwest.setDefaultDataType('json');
    qwest.setDefaultOptions({
      headers,
    });

    // Make http request
    qwest[`${method}`](url, params)
      .then((xhr, response) => {
        resolve(response);
      })
      .catch((error, xhr) => {
        if (xhr.status === 401 && tryCount <= 1) { // IdToken expired, and we've recursed less than twice so far
          GenerateToken(tryCount + 1).then(() => {
            resolve(GET(url));
          });
        } else {
          reject(error); // error
        }
      });
  });
}

Also note that you should avoid the explicit Promise construction antipattern:

export default function GenerateToken(tryCount = 0) {
  const refreshToken = GetRefreshToken();
  const url = `${cloudFunctionURL}/users/auth/idtoken/refresh`;
  const headers = {
    'Content-Type': 'application/json',
  };
  const params = {
    refreshToken,
  };
  return httpRequest.makeHTTPCall('post', url, headers, params, tryCount).then((tokenObject) => {
    // Storing the idToken in localstorage
    // reactLocalStorage.set('PL_IdToken', tokenObject.idToken);
    StoreIdToken(`Id ${tokenObject.id_token}`);
    StoreUserId(tokenObject.user_id);
    StoreRefreshToken(tokenObject.refresh_token);
    return tokenObject.id_token;
  });
}
// 2nd File

function makeHTTPCall(method, url, headers, params, tryCount) {
  headers.Authorization = GetIdToken();
  headers['Content-Type'] = 'application/json';
  qwest.setDefaultDataType('json');
  qwest.setDefaultOptions({
    headers,
  });

  // Make http request
  return qwest[`${method}`](url, params)
    .then((xhr, response) => {
      return response;
    })
    .catch((error, xhr) => {
    if (xhr.status === 401 && tryCount <= 1) { // IdToken expired, and we've recursed less than twice so far
      return GenerateToken(tryCount + 1).then(() => {
        return GET(url);
      });
    } else {
      throw new Error(error);
    }
  });
}

How can I break this Javascript HTTP Infinite request loop after 3 requests?

1 Answers1