axios请求拦截器-标头值未根据状态值更新

lnvxswe2 于 2021-09-23 发布在 Java

关注(0)|答案(1)|浏览(322)

我目前正在对一个公共api进行api调用，该api返回一个关于猫的随机事实。我还添加了axios拦截器，以便在useeffect中附加一个新的请求头，并希望每次更改updateheader状态值时都会更新x_testing_头。

useEffect(() => {
    axios.interceptors.request.use(config => {
    config.headers.X_TESTING_HEADER = `${updateHeader}`;
    return config;
   });
  }, [updateHeader]);

https://stackblitz.com/edit/axios-interceptors-issues?file=src/shell.js 具有包含所有必要代码块的工作示例。请查收https://axios-interceptors-issues.stackblitz.io/ 运行stackblitz代码并打开n/w选项卡以检查标题值。
默认情况下，updateheader值设置为false，当用户登录页面时，x_testing_头值设置为false。下面的屏幕截图显示了名为“更新标题”和“获取新事实”的两个按钮。

单击更新标题，将状态值切换到false和true之间，然后单击更新标题按钮，可以观察到屏幕上的状态值已更新。尝试使用“获取新事实”按钮获取新事实时，x\u testing\u header值仍显示为false。如何根据状态值更新请求标头，标头是否仅设置一次，是否需要刷新以更新标头值？

JavaScript reactjs axios

来源：https://stackoverflow.com/questions/68313547/axios-request-interceptors-header-value-not-updating-as-per-state-value

1条答案

按热度按时间

hfsqlsce1#

您在useeffect中创建拦截器的示例；将在每次调用useeffect时添加新的拦截器。所以，如果你想更新一个拦截器，你必须首先清理任何先前提出的拦截器。https://axios-http.com/docs/interceptors
拦截器更适用于变化不大的逻辑。如果您需要经常设置新标题，而不是创建自定义axios示例，一种可能的解决方案是：
（见https://axios-http.com/docs/instance 及https://axios-http.com/docs/config_defaults)

const axiosInstance = axios.create({
    baseURL: END_POINT,
    headers: {X_TESTING_HEADER: `${updateHeader}`}
  });

  useEffect(() => {
    axiosInstance.defaults.headers.X_TESTING_HEADER = `${updateHeader}`;
  }, [updateHeader]);

  const getFacts = () => {
    axiosInstance
      .get(`${RANDOM_FACTS}`)
      .then(res => {
        setFacts(res.data.text);
      })
      .catch(err => {
        console.log(err);
      });
  };

赞(0）回复(0）举报 2021-09-23

我来回答

axios请求拦截器-标头值未根据状态值更新

1条答案

相关问题

热门标签

最新问答