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

Question

我目前正在对一个公共 API 进行 API 调用，该 API 返回一个关于 Cats 的随机事实。我还添加了 Axios 拦截器以在 UseEffect 内附加一个新的请求标头，并期望每次 updateHeader 状态值时更新 X_TESTING_HEADER已更改。

  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 具有包含所有必要代码块的工作示例。请检查运行 stackblitz 代码的 https://axios-interceptors-issues.stackblitz.io/ 并打开 N/W 选项卡以检查标题值。

默认情况下，updateHeader 值设置为 false，当用户登陆页面时，X_TESTING_HEADER 值设置为 false。下面的屏幕截图显示了 2 个名为“更新标题”和“获取新事实”的按钮。

点击更新标题，在false和true之间切换状态值，点击更新标题按钮后，可以观察到屏幕上的状态值被更新。当尝试使用 Get New Fact 按钮获取新事实时，** X_TESTING_HEADER** 值仍显示为 false。如何根据状态值更新请求标头，标头是否只设置一次并且需要刷新以更新标头值？

Answer 1

你给出的在 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);
      });
  };