如何通过单个Axios请求携带多个参数调用API获取数据

有几种可行的方案，取决于你的API支持哪种参数传递方式：

1. API支持同一参数名传多个值 #

如果后端API允许同一个参数名携带多个值（比如gls_url=param_1&gls_url=param_2），直接用axios的params配置传数组即可，axios会自动帮你拼接成正确的URL：

const targetParams = ["param_1", "param_2"];

useEffect(() => {
  axios.get('http://google_services', {
    params: {
      gls_url: targetParams
    }
  }).then(res => {
    // 这里拿到的就是两个参数对应的数据
    console.log(res.data);
  }).catch(err => {
    console.error('请求出错:', err);
  });
}, []);

2. API要求参数值用分隔符拼接 #

如果API要求把多个参数值用逗号、分号之类的分隔符拼成单个字符串（比如gls_url=param_1,param_2），就用数组的join方法处理：

const targetParams = ["param_1", "param_2"];

useEffect(() => {
  axios.get('http://google_services', {
    params: {
      gls_url: targetParams.join(',')
    }
  }).then(res => {
    console.log(res.data);
  }).catch(err => {
    console.error('请求出错:', err);
  });
}, []);

3. 用POST请求传递参数数组 #

如果API只接受POST请求，把参数数组放在请求体里即可：

const targetParams = ["param_1", "param_2"];

useEffect(() => {
  axios.post('http://google_services', {
    gls_url: targetParams
  }).then(res => {
    console.log(res.data);
  }).catch(err => {
    console.error('请求出错:', err);
  });
}, []);

注意事项 #

• 核心前提是先看API文档，确认它支持哪种多参数传递方式，这是最关键的
• 尽量不要手动拼接URL，用axios的params或data配置，能自动处理特殊字符编码，避免出现请求错误

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