如何在Axios中合并参数？跨端点复用query参数技术问询

1. 提取可复用参数 #

先把需要跨端点复用的query参数单独定义，避免重复编写，也方便后续维护：

const sharedParams = { query: query }; // 无需模板字符串，直接传入变量即可

2. 给第二个请求追加共享参数 #

修改getMarket的params配置，用对象展开运算符把固定参数和共享参数合并，实现参数复用：

const getMarket = axios.get(url[1], {
  params: { 
    vs_currency: 'usd',
    per_page: 100,
    ...sharedParams, // 将query参数合并到当前请求的参数中
  },
  headers: { Accept: "application/json" }
});

3. 修正请求函数与状态更新逻辑 #

你的requestedData采用了async声明，但内部混用then/catch，改用async/await写法更简洁直观；同时修正setRetrievedData的参数格式，避免数据结构混乱：

const requestedData = async () => {
  try {
    const [res1, res2] = await axios.all([getSearch, getMarket]);
    // 按业务需求合并两个接口的响应数据，这里用明确键名区分，避免数据覆盖
    setRetrievedData({ searchResult: res1.data, marketResult: res2.data });
  } catch (error) {
    console.error('请求失败:', error); // 不要仅捕获错误不处理，至少打印便于排查
  }
};

补全第一个请求的完整代码 #

确保第一个请求也使用共享参数（你原代码中getSearch的定义不完整）：

const getSearch = axios.get(url[0], {
  params: sharedParams,
  headers: { Accept: "application/json" }
});

完整修正后代码示例 #

// 假设url是包含两个端点的数组，query为你的搜索参数
const sharedParams = { query: query };

const getSearch = axios.get(url[0], {
  params: sharedParams,
  headers: { Accept: "application/json" }
});

const getMarket = axios.get(url[1], {
  params: { 
    vs_currency: 'usd',
    per_page: 100,
    ...sharedParams,
  },
  headers: { Accept: "application/json" }
});

const requestedData = async () => {
  try {
    const [res1, res2] = await axios.all([getSearch, getMarket]);
    setRetrievedData({ searchResult: res1.data, marketResult: res2.data });
  } catch (error) {
    console.error('请求出错:', error);
  }
};

useEffect(() => {
  requestedData();
}, [query]);

关键说明 #

• 借助对象展开运算符...可以快速将共享参数合并到不同请求的params中，实现跨端点参数复用。
• async/await相比then/catch写法更易读，也更便于错误捕获与处理。
• 更新状态时建议用明确的键名区分不同接口的返回数据，避免数据覆盖或结构混乱。

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