Как поставить редирект в промисе?

Question

[karpo518]

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

Можно было бы проверять тип ошибки в каждом компоненте, но хотелось разрулить ситуацию в одном месте, потому что она нужна для всех запросов к API и для всех компонентов. Пока приходит в голову только возвращение из промиса другого зависшего промиса, но это решение выглядит небезопасно.

Как правильно разрешать такую ситуацию?

Ниже предоставляю пример псевдокода для понимания сути проблемы

Пример кода

function sendApiRequest(url, params) {

	return fetch(url)
      .then(response => {
	  if (!response.ok) {
	    throw new Error(`HTTP error! status: ${response.status}`);
	  }
      
      return response.json();
  })
  .then(data => {
    if (!date.success) {
    	if (data.code === 111) {
    		// Здесь нужно прервать выполнение дальнейшего кода,
    		// Чтобы не было дальнейших перерисовок компонентов и конфликтов при обновлении сторов
    		// потому что пользователь будет перенаправлен на другую страницу
    		window.location.replace('#/another-page');
    		return new Promise(() => {});

    	}
    	throw new Error('ApiError');
    }
    console.log(data);
  })
  .catch(error => {
    // Handle any network errors or errors thrown in the then() blocks
    console.error('NetworkError:', error);
  });
	
}

Comments

[WbICHA]

Так напиши функцию-врапер для фетча и в неё этот кейс обрабатывай.

[karpo518]

WbICHA, обёртка написана. Что должна возвращать эта обёртка в ситуации, когда и разрешенный и отклоненный промис приводит ненужным ререндерам страницы, с которой выполняется редирект?

[WbICHA]

karpo518, а, да, теперь понял о чём речь. Тогда хук напиши вместо этой функции и там уже обрабатывай все кейсы.

[karpo518]

WbICHA, проект на классовых компонентах

[WbICHA]

karpo518, эммм, что? Это те самые классовые компоненты, которые уже больше 5 лет только для эррор боундари используются? Зачем ты на них проект пишешь в 2026?
Но даже так, у классов есть наследование и декораторы.

[Aetae]

Если редирект гаратирован, то вечный промис - нормальное решение: он повисит сколько-то миллисекунд, пока страница не будет выгружена и не будет загружена новая.
В ином случае - только кидать и обрабатывать ошибку со специальным кодом.

Answer 1

[Kazilsky]

Если я так понял то выходит вот такая штука

У тебя в коде есть постоянный промис
Если он вечен, то ты впринципе все так реализовал РАЗВЕ ЧТО
Нужно возвращать data

А если не вечный то типо вот

class RedirectError extends Error {
  constructor(location) {
    super('Redirect');
    this.name = 'RedirectError';
    this.location = location;
  }
}

function sendApiRequest(url, params) {
  return fetch(url)
    .then(r => {
      if (!r.ok) throw new Error(`HTTP error! status: ${r.status}`);
      return r.json();
    })
    .then(data => {
      if (!data.success) {
        if (data.code === 111) {
          throw new RedirectError('#/another-page');
        }
        throw new Error('ApiError');
      }
      return data;
    });
}