Axios GET请求传参的实战指南：从基础到高级用法

1次阅读

共计 1426 个字符，预计需要花费 4 分钟才能阅读完成。

Axios 是一个基于 Promise 的 HTTP 客户端，广泛用于浏览器和 Node.js 环境。GET 请求作为 HTTP 最常用的方法之一，其参数传递方式直接影响请求的可靠性、安全性和性能。GET 请求的参数通常附加在 URL 末尾，形成查询字符串（Query String），这使得参数传递方式的选择尤为重要。

在实际开发中，GET 请求传参常遇到以下问题：

参数编码问题 ：特殊字符如&、= 等需要正确编码，否则可能导致参数解析错误。
URL 长度限制：浏览器对 URL 长度有限制（通常约 2000 字符），过长的参数可能导致请求失败。
复杂数据结构传递：传递数组或嵌套对象时，需要特定的序列化规则。
安全性问题：敏感数据暴露在 URL 中可能被日志记录或浏览器历史记录泄露。

Axios 提供了 params 配置项，可以自动将对象序列化为查询字符串。例如：

axios.get('/api/data', {
  params: {
    id: 123,
    name: 'John Doe'
  }
});

对于复杂数据结构，可以通过 paramsSerializer 自定义序列化逻辑：

axios.get('/api/data', {
  params: {ids: [1, 2, 3],
    filters: {status: 'active', role: 'admin'}
  },
  paramsSerializer: params => {return qs.stringify(params, { arrayFormat: 'brackets'});
  }
});

减少 URL 长度：对于大量数据，考虑使用 POST 请求或分页加载。
缓存策略 ：合理设置Cache-Control 头部，避免重复请求。

以下是一个完整的示例，展示不同传参方式：

// 基础传参
axios.get('/api/user', {params: { id: 1}
});

// 数组传参
axios.get('/api/users', {params: { ids: [1, 2, 3] },
  paramsSerializer: params => qs.stringify(params, { indices: false})
});

// 嵌套对象传参
axios.get('/api/search', {
  params: {
    query: {
      name: 'John',
      age: 30
    }
  },
  paramsSerializer: params => qs.stringify(params, { encode: false})
});