如何将两个不同长度数组的所有组合传入axios请求的URL参数

实现方案 #

你需要生成两个数组的笛卡尔积组合，再逐个拼接参数发起请求，完整实现代码如下：

并发请求版本（适合请求量小、接口无限流的场景）

const searchArr = [
  "Search 1",
  "Search 2",
  "Search 3",
  "Search 4",
  "Search 5",
  "Search 6",
];

const locationArr = [
  "80829",
  "32628",
  "76112",
  "28273",
  "93727",
  "30331",
  "90067",
  "95814",
  "94601",
  "20036",
  "60637",
  "02461",
  "10452",
  "78701",
];

// 生成所有组合的请求任务
const requestList = []
// 嵌套循环生成两个数组的全组合（笛卡尔积）
for (const searchTerm of searchArr) {
  // 注意不要用location作为变量名，避免和浏览器全局window.location冲突
  for (const loc of locationArr) {
    // 使用URLSearchParams拼接参数，自动编码特殊字符，避免参数解析错误
    const params = new URLSearchParams({
      search: searchTerm,
      location: loc
    })
    const url = `http://localhost:3000/search?${params.toString()}`
    // 存入请求Promise，单独捕获错误避免单个请求失败中断所有任务
    requestList.push(
      axios.get(url)
        .then(res => res.data.jobs)
        .catch(err => {
          console.error(`请求失败，参数：search=${searchTerm}, location=${loc}`, err)
          return []
        })
    )
  }
}

async function getAllList() {
  // 并发执行所有请求
  const allResult = await Promise.all(requestList)
  // 扁平化合并所有返回的职位数据
  const mergedJobs = allResult.flat()
  setTableData(mergedJobs)
}

串行请求版本（适合接口有限流、请求量大的场景）

async function getAllListSerially() {
  const allJobs = []
  for (const searchTerm of searchArr) {
    for (const loc of locationArr) {
      const params = new URLSearchParams({ search: searchTerm, location: loc })
      const url = `http://localhost:3000/search?${params.toString()}`
      try {
        const res = await axios.get(url)
        allJobs.push(...res.data.jobs)
      } catch (err) {
        console.error(`请求失败，参数：search=${searchTerm}, location=${loc}`, err)
      }
    }
  }
  setTableData(allJobs)
}

注意事项 #

• 变量命名避开location关键字，防止浏览器环境下和全局window.location对象冲突
• URLSearchParams会自动对中文、特殊符号做URL编码，比直接用字符串模板拼接参数更安全
• 可根据接口限流规则选择并发/串行请求方案，单个请求的错误捕获逻辑保证单请求失败不会影响整体任务执行

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