GET请求携带参数的三种方法，没想到竟然还有这招
2023-07-28 10:43:07
使用 Axios 发送 GET 请求时的参数传递
在 Vue 中，使用 Axios 发送 GET 请求时，经常需要携带一些参数，以过滤或排序数据。传统的方法是使用字符串拼接的方式，将参数拼接到 URL 中，但这存在一些问题。
字符串拼接：简单但有缺陷
字符串拼接是将参数拼接到 URL 中的最简单的方法。例如：
axios.get('/api/users?name=John&age=30')
这种方法简单易用，但存在一些缺点：
- URL 变得很长，难以阅读和维护
- 参数容易出错，例如忘记转义特殊字符
- 难以动态地添加或删除参数
URLSearchParams：一种更现代的方法
URLSearchParams 是 JavaScript 内置的对象，可以用来存储和操作 URL 参数。使用 URLSearchParams 发送 GET 请求，可以将参数以对象的形式传递，并自动将其转换为字符串。例如：
const params = new URLSearchParams()
params.append('name', 'John')
params.append('age', 30)
axios.get('/api/users', {
params
})
这种方法比字符串拼接更简洁，也更不容易出错。此外，还可以动态地添加或删除参数。例如：
params.delete('age')
axios.get('/api/users', {
params
})
query-string：一个灵活的 npm 包
query-string 是一个 npm 包，可以用来解析和操作 URL 查询字符串。使用 query-string 发送 GET 请求，可以将参数以对象的形式传递，并自动将其转换为字符串。例如：
const qs = require('query-string')
const params = {
name: 'John',
age: 30
}
const queryString = qs.stringify(params)
axios.get(`/api/users?${queryString}`)
这种方法与 URLSearchParams 类似，但更灵活。例如，可以使用 query-string 来解析 URL 查询字符串，并将其转换为对象。
总结
这三种方法各有优缺点。字符串拼接是最简单的方法，但存在一些缺陷。URLSearchParams 和 query-string 是更现代的方法，可以更轻松地处理参数，并且更不容易出错。
常见问题解答
-
哪种方法最好？
没有一种方法最好，这取决于你的具体需求。如果你需要一个简单的方法，字符串拼接就可以了。如果你需要更灵活的方法，可以使用 URLSearchParams 或 query-string。 -
URLSearchParams 和 query-string 有什么区别？
URLSearchParams 是 JavaScript 内置的对象，而 query-string 是一个 npm 包。query-string 更灵活，可以解析和操作 URL 查询字符串。 -
如何使用 URLSearchParams 动态地添加或删除参数？
可以使用append()和delete()方法动态地添加或删除参数。 -
如何使用 query-string 将对象转换为查询字符串？
可以使用stringify()方法将对象转换为查询字符串。 -
我可以在 Vue 组件中使用这些方法吗？
是的，你可以在 Vue 组件中使用这些方法。只需在mounted()生命周期钩子中设置参数，然后使用axios.get()方法发送 GET 请求。
