Axios动态参数问题：声明变量传入GET请求options后返回undefined，是否遗漏步骤？

兄弟，这问题我太熟了！核心原因就是你定义options的时机太早了，导致params里的email拿到的是还没被赋值的emailInput，自然就是undefined。

具体来说：你现在的代码里，options是在getEmail()函数外面提前声明的。这时候页面刚加载，getEmail()还没被调用，document.querySelector('input').value根本没执行过，emailInput要么是未定义，要么是空值（如果没提前声明甚至会报错）。等你后来调用getEmail()拿到输入框的值时，options里的params.email早已经固定成最初的undefined了，它不会自动跟着emailInput的变化更新。

给你两个靠谱的解决方案：

方案1：每次请求前动态生成options #

把options的定义放到获取输入值的函数里，确保每次发起请求时，params.email都能拿到最新的输入值：

function fetchDataByEmail() { 
  // 先拿到最新的输入框值
  const emailInput = document.querySelector('input').value; 
  // 动态生成请求配置
  const options = { 
    method: 'GET', 
    // 你的其他配置，比如接口地址
    url: '/your-api-endpoint',
    params :{ 
      email: emailInput 
    } 
  };
  // 发起请求
  axios.request(options)
    .then(res => {
      console.log('请求成功', res);
      // 处理返回数据
    })
    .catch(err => console.error('请求出错', err));
}

方案2：复用基础配置，每次更新参数 #

如果你的options里有很多固定配置不想重复写，可以先声明基础配置，每次请求前只更新params里的动态参数：

// 提前声明固定的基础配置
const baseOptions = { 
  method: 'GET', 
  url: '/your-api-endpoint',
  // 其他固定配置，比如请求头
  headers: { 'Content-Type': 'application/json' },
  params :{ 
    email: '' // 先初始化空值
  } 
};

function fetchDataByEmail() { 
  const emailInput = document.querySelector('input').value; 
  // 更新动态参数
  baseOptions.params.email = emailInput;
  // 发起请求
  axios.request(baseOptions)
    .then(res => console.log('请求成功', res))
    .catch(err => console.error('请求出错', err));
}

另外提个小建议：你原来的代码里emailInput没加const或let，会变成全局变量，很容易引发意外的变量污染，尽量用块级作用域变量（const/let）来定义它哦。

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