Window.location.href не перенаправляется на внешний URL-адрес внутри метода ожидания

У меня есть функция, как показано ниже

const redirect = async ()  => {
    await aFunc().then(async () => {
        await bFunc().then((externalUrl) => {
            window.location.href = externalUrl;
        });
    });
}

из компонента реакции, вызывающего эту функцию, как показано ниже

<Button onClick = { async() => { await redirect(); }}></Button>

Когда я отлаживал этот код, я заметил, что когда он выполняет строку «window.location.href», он не перенаправляется на внешний URL-адрес, а просто перезагружает страницу.

Вы проверили значение externalUrl перед перенаправлением?

Teemu 11.11.2022 07:28

@Teemu да, я получаю там ценность

Sritam Jagadev 11.11.2022 07:29

Это звучит как ожидающая отправка формы, просто не знаю, как ее можно ожидать, обычно отправка прерывает асинхронные действия.

Teemu 11.11.2022 07:30

поделиться дополнительной информацией

Moein Moeinnia 15.11.2022 11:58
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
246
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Здесь (externalUrl) = { ... } нужно заменить на стрелку, например,

   await bFunc().then((externalUrl) => {
        window.location.href = externalUrl;
    });

Кроме того, я включил как aFunc, так и bFunc с обещанием, разрешенным внутри него с помощью setTimeout.

Итак, здесь функция перенаправления выполняет перенаправление window.location.href на externalUrl после разрешения.

Рабочий фрагмент:

const App = () => {

  const aFunc = () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve("resolved");
      }, 500);
    });
  }

  const bFunc = () => {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve("https://stackoverflow.com");
      }, 500);
    });
  }

  const redirect = async () => {
    await aFunc().then(async () => {
      await bFunc().then((externalUrl) => {
        if (externalUrl) {
         window.location.href = externalUrl;
        }
      });
    });
  };

  return (
    <div>
      <button
        onClick = {async () => {
          await redirect();
        }}
      >
        Click Here
      </button>
    </div>
  );
};

// Render it
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
<div id = "root"></div>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>
<script src = "https://unpkg.com/@babel/standalone@7/babel.min.js"></script>

Кодыпесочницы:

добавление setTimeOut решило проблему

Sritam Jagadev 15.11.2022 15:10

Другие вопросы по теме