Javascript 在 Vue 中使用 Axios 将查询参数传递给 URL 的最佳方法？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53709142/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Best Way to Pass Query Parameters to URL Using Axios in Vue?
提问by user9664977
What I am trying to accomplish is when the page first loads I will use Axios using the base URL to pull back a JSON object. I then want to add query parameters to the base URL when a button is clicked. So something along the lines of if the base URL is 'test.com' when the button is clicked a query parameter would be added to the URL and Axios would run again pulling back a different JSON object. So the URL could look something like 'test.com?posttype=new'.
我想要完成的是，当页面第一次加载时，我将使用 Axios 使用基本 URL 来拉回一个 JSON 对象。然后我想在单击按钮时将查询参数添加到基本 URL。因此，当单击按钮时，如果基本 URL 是“test.com”，则查询参数将添加到 URL 中，并且 Axios 将再次运行以拉回不同的 JSON 对象。因此 URL 可能类似于“test.com?posttype=new”。
What I am currently doing is on create run Axios with the base URL and when the button is clicked run a method that runs Axios again but this time it adds the query parameters to the URL so in Vue it looks like:
我目前正在做的是使用基本 URL 创建运行 Axios，当单击按钮时运行一个再次运行 Axios 的方法，但这次它将查询参数添加到 URL 中，因此在 Vue 中它看起来像：
created () {
axios
.get(this.jobsListURL)
.then(response => (this.jobsList = response.data.data))
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
},
methods: {
getJobs: function () {
axios
.get(this.jobsListURL + '?' + this.AxiosParams)
.then(response => (this.jobsList = response.data.data))
.catch(error => {
console.log(error)
this.errored = true
})
.finally(() => this.loading = false)
},
So in the above example jobsListURL is the base URL for the JSON object and AxiosParams is a method I am calling to add the parameters to the URL when the button is clicked. So when the button is clicked it is running the getJobs method to rerun Axios using the URL with the parameters. I am not sure if this is the best approach for this or if there is a better way of adding query parameters to the URL and grabbing the new JSON object this way.
因此，在上面的示例中，jobsListURL 是 JSON 对象的基本 URL，而 AxiosParams 是我调用的一种方法，用于在单击按钮时将参数添加到 URL。因此，当单击按钮时，它会运行 getJobs 方法以使用带有参数的 URL 重新运行 Axios。我不确定这是否是最好的方法，或者是否有更好的方法将查询参数添加到 URL 并以这种方式获取新的 JSON 对象。
Just looking for some feedback before I go to far down this route to see if there is a better approach for this?
只是在我走这条路之前寻找一些反馈，看看是否有更好的方法？
回答by Jeff
You can use the second argument to .getif you want to pass an object instead:
.get如果你想传递一个对象，你可以使用第二个参数：
axios.get(this.jobsListURL, {
params: this.axiosParams
})
This is pretty much the same, but you don't have to do the string manipulation for the URL.
这几乎相同，但您不必对 URL 进行字符串操作。
You can build that object like this:
您可以像这样构建该对象：
computed: {
axiosParams() {
const params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
return params;
}
}
回答by Simsteve7
if this.AxiosParams is a json object like { "posttype": "new" }, this will work:
如果 this.AxiosParams 是一个像 { "posttype": "new" } 这样的 json 对象，这将起作用：
axios.get(this.jobsListURL, this.AxiosParams)
axios.get(this.jobsListURL, this.AxiosParams)
But this doesn't work when the values are arrays, then you could add a paramsSerializer.
但是当值是数组时这不起作用，那么你可以添加一个paramsSerializer。
//import qs from 'qs'; (https://www.npmjs.com/package/qs)
this.http = axios.create({
baseURL: `https://mydomain/api/v1/`,
paramsSerializer: (params) => {
return qs.stringify(params, {arrayFormat: 'repeat'});
},
});
this.http.get('jobs', this.AxiosParams);