Отключить одновременные или одновременные HTTP-запросы AXIOS

Question

У нас возникла проблема с нашим токеном обновления аутентификации, когда при выполнении нескольких запросов с одним и тем же токеном доступа с истекшим сроком действия все они будут делать backend для обновления токена и иметь разные обновленные токены в своих ответы. Теперь, когда будет сделан следующий запрос, будет использоваться токен обновления последнего ответа, который может быть или не быть последним.

Одним из решений этой проблемы является то, что пользовательский интерфейс (который использует axios in vue) отправляет только один запрос за раз. Таким образом, если токен обновляется, следующий запрос будет иметь самый последний токен.

Следовательно Мне интересно, есть ли у axios опция по умолчанию для отключения одновременных запросов , так как я не смог найти в Интернете ничего об этом. Другое решение состоит в том, чтобы поддерживать очередь запросов, где каждый запрос отправляется только тогда, когда на предыдущий запрос получен ответ (либо успешный, либо неудачный) (опция вручную). Я понимаю, что это может снизить производительность, как может показаться в пользовательском интерфейсе, но это также снимет нагрузку с бэкэнда.

Answer 1

Одно возможное решение, которое я нашел здесь , заключается в использовании перехватчика:

let isRefreshing = false;
let refreshSubscribers = [];

const instance = axios.create({
  baseURL: Config.API_URL,
});

instance.interceptors.response.use(response => {
 return response;
}, error => {
  const { config, response: { status } } = error;
  const originalRequest = config;

  if (status === 498) { //or 401
    if (!isRefreshing) {
      isRefreshing = true;
      refreshAccessToken()
        .then(newToken => {
          isRefreshing = false;
          onRrefreshed(newToken);
        });
    }

    const retryOrigReq = new Promise((resolve, reject) => {
      subscribeTokenRefresh(token => {
        // replace the expired token and retry
        originalRequest.headers['Authorization'] = 'Bearer ' + token;
        resolve(axios(originalRequest));
      });
    });
    return retryOrigReq;
  } else {
    return Promise.reject(error);
  }
});

subscribeTokenRefresh(cb) {
  refreshSubscribers.push(cb);
}

onRrefreshed(token) {
  refreshSubscribers.map(cb => cb(token));
}