反应Axios拦截器跳得很晚
反应Axios拦截器跳得很晚
提问于 2021-12-04 19:08:20
我正在进行一个小的react项目，并使用axios拦截器来捕捉我是在本地主机开发环境中还是在已部署的生产网站上。当人们注册我的网站时，他们会点击确认电子邮件链接，然后登陆到某种“状态”或者你称之为“状态”的应用程序，在这个应用程序中，axios拦截器不知道我所处的环境是什么，然后在调用正确的api uri之后，立即发出错误的api调用。
让我用一些代码展示一下：
export const App = () => {
useEffect(() => {
axios.interceptors.request.use((req) => {return { ...req, url: getBaseUri() + req.url
};})}, []);
return (
<div className="App">
<Routes />
</div>
)}然后是方法：
const devUriBase = "http://localhost:8080";
const prodUriBase = "https://my-website.herokuapp.com";export function getBaseUri() {
return window.location.host.includes("localhost") ? devUriBase : prodUriBase;
}然后，在验证页组件上，我自己调用api，然后对不正确的url进行api调用，因此在一瞬间显示组件，然后似乎useEffect跳入，再次调用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 = () => {
const { verificationString } = useParams();
const [, setToken] = useToken();
const [state, setState] = useState('loading');
useEffect(() => {
const loadVerification = async () => {
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 <p>Cargando...</p>;
if (state === 'error') return <EmailVerificationFail />
return <EmailVerificationSuccess />谢谢你的帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-12-06 21:15:36
这就成功了。添加请求拦截器时，默认情况下假定它们是异步的。当主线程被阻塞时，这可能会导致axios请求的执行延迟(在拦截器下创建承诺，并将请求放在调用堆栈的底部)。如果请求拦截器是同步的，则可以向options对象添加一个标志，该标志将告诉axios同步运行代码，并避免请求执行中的任何延迟。
axios.interceptors.request.use(function (config) {
config.headers.test = 'I am only a header!';
return config;
}, null, { synchronous: true });页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70228659
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号