Next.js中切换Checkbox状态后无法替换API请求URL求助

你当前的问题核心在于：axios实例是在模块初始化阶段创建的，baseURL一旦被赋值就固定下来了。后续切换Checkbox时，你只是调用了createServerUrl(isDev)生成新的URL，但并没有把这个新URL更新到已创建的api实例的配置中，所以请求始终使用初始化时的baseURL。

下面提供几种可行的修改方式：

方式1：直接更新axios实例的默认配置 #

这是最简单的方案，在useEffect中直接修改已创建的api实例的defaults.baseURL：

export const createServerUrl = (isDev?: boolean) => {
  let url;
  if (isDev) {
    url = 'https://api.majordom-dev.parker-programs.com/v1/';
  } else {
    url = 'https://api.majordom.parker-programs.com/';
  }
  console.log(url);
  return url;
};

export const api = axios.create({
  baseURL: createServerUrl(),
}); 

const [isDev, setIsDev] = useState(false);
  
useEffect(() => {
  // 关键：把新生成的URL赋值给api实例的baseURL
  api.defaults.baseURL = createServerUrl(isDev);
}, [isDev]);

<input type="checkbox" onInput={() => setIsDev((prev) => !prev)}/>

方式2：动态生成axios实例（无全局实例） #

如果不想维护全局axios实例，可以每次请求前根据当前isDev状态生成实例：

export const createServerUrl = (isDev?: boolean) => {
  return isDev 
    ? 'https://api.majordom-dev.parker-programs.com/v1/'
    : 'https://api.majordom.parker-programs.com/';
};

// 封装一个获取axios实例的函数
const getApiInstance = (isDev: boolean) => {
  return axios.create({
    baseURL: createServerUrl(isDev),
  });
};

const [isDev, setIsDev] = useState(false);

// 示例请求
const fetchData = async () => {
  const api = getApiInstance(isDev);
  const response = await api.get('/some-endpoint');
  // 处理响应
};

<input type="checkbox" onInput={() => setIsDev((prev) => !prev)}/>

方式3：自定义请求函数动态设置baseURL #

也可以封装一个请求函数，每次请求时动态指定baseURL：

export const createServerUrl = (isDev?: boolean) => {
  return isDev 
    ? 'https://api.majordom-dev.parker-programs.com/v1/'
    : 'https://api.majordom.parker-programs.com/';
};

const [isDev, setIsDev] = useState(false);

const apiRequest = async (method: string, url: string, data?: any) => {
  const baseURL = createServerUrl(isDev);
  return axios({
    method,
    url: `${baseURL}${url}`,
    data,
  });
};

// 示例调用
const fetchUsers = async () => {
  const response = await apiRequest('get', 'users');
  // 处理响应
};

<input type="checkbox" onInput={() => setIsDev((prev) => !prev)}/>

原代码中export const api = axios.create({ baseURL: createServerUrl() });这行代码在模块首次加载时就执行完毕，此时createServerUrl()的参数是默认的undefined，对应生产环境URL。后续useEffect中调用createServerUrl(isDev)只是生成新URL并打印，但没有修改api实例的配置，所以请求还是用初始化时的旧URL。

内容的提问来源于stack exchange，提问作者Konstantin