Блог

Я работаю над небольшим проектом react и использую перехватчики axios, чтобы определить, нахожусь ли я в среде разработки локального хоста или на веб-сайте, развернутом на производстве. Происходит то, что, когда люди регистрируются на моем сайте, они нажимают на ссылку электронной почты с подтверждением и попадают в определенное «состояние» или как вы его там называете, или в приложение, где перехватчик axios не знает, в какой среде я нахожусь, и на долю секунды выполняется неправильный вызов api, справа после него вызывается правильный uri api.

Позвольте мне показать это с помощью некоторого кода:

 export const App = () =gt; {  useEffect(() =gt; {  axios.interceptors.request.use((req) =gt; {return { ...req, url: getBaseUri()   req.url   };})}, []);  return (  lt;div className="App"gt;  lt;Routes /gt;  lt;/divgt;   )}  

А затем методы:

 const devUriBase = "http://localhost:8080"; const prodUriBase = "https://my-website.herokuapp.com";export function getBaseUri() {  return window.location.host.includes("localhost") ? devUriBase : prodUriBase; }  

Затем на компоненте страницы проверки, где я сам вызываю api, на мгновение вызов api выполняется по неправильному URL-адресу, поэтому на долю секунды отображается компонент, затем, похоже, включается эффект использования, и вызов api выполняется снова. Ни одна из комбинаций, которые я пробовал, не сработала. Я попытался создать компонент конфигурации и через дочерние элементы получил перехватчик axios, вместо этого поместив его в индекс, и я не знаю, что еще. Я боролся с этим в течение 3 дней, я подумал, что пришло время спросить.

 import { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; import axios from 'axios'; import { useToken } from '../../auth/useToken'; import { EmailVerificationSuccess } from './EmailVerificationSuccess'; import { EmailVerificationFail } from './EmailVerificationFail';  export const EmailVerificationLandingPage = () =gt; {  const { verificationString } = useParams();  const [, setToken] = useToken();  const [state, setState] = useState('loading');   useEffect(() =gt; {  const loadVerification = async () =gt; {  try {  const response = await axios.put('/api/verify-email', { verificationString });  const { token } = response.data;  setToken(token);  setState('success');  } catch (e) {  setState('error');  }  }   loadVerification();  }, [setToken, verificationString]);   if (state === 'loading') return lt;pgt;Cargando...lt;/pgt;;  if (state === 'error') return lt;EmailVerificationFail /gt;  return lt;EmailVerificationSuccess /gt;  

Я ценю вашу помощь.

Это сделало свое дело. Когда вы добавляете перехватчики запросов, по умолчанию предполагается, что они асинхронны. Это может привести к задержке в выполнении вашего запроса axios, когда основной поток заблокирован (обещание создается под колпаком для перехватчика, и ваш запрос помещается в нижнюю часть стека вызовов). Если ваши перехватчики запросов синхронны, вы можете добавить флаг в объект options, который будет указывать axios запускать код синхронно и избегать любых задержек в выполнении запроса.

 axios.interceptors.request.use(function (config) { config.headers.test = 'I am only a header!'; return config; }, null, { synchronous: true });