在 Vue 中使用 Axios 将查询参数传递给 URL 的最佳方法？答案

【问题标题】：Best Way to Pass Query Parameters to URL Using Axios in Vue?在 Vue 中使用 Axios 将查询参数传递给 URL 的最佳方法？
【发布时间】：2019-05-11 13:23:52
【问题描述】：

我想要完成的是，当页面首次加载时，我将使用 Axios 使用基本 URL 来拉回 JSON 对象。然后，我想在单击按钮时将查询参数添加到基本 URL。因此，如果单击按钮时基本 URL 是“test.com”，则会将查询参数添加到 URL 中，并且 Axios 将再次运行拉回不同的 JSON 对象。因此 URL 可能类似于“test.com?posttype=new”。

我目前正在做的是使用基本 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)
  },

所以在上面的示例中，jobsListURL 是 JSON 对象的基本 URL，而 AxiosParams 是我调用的一种方法，用于在单击按钮时将参数添加到 URL。因此，当单击按钮时，它正在运行 getJobs 方法以使用带有参数的 URL 重新运行 Axios。我不确定这是否是最好的方法，或者是否有更好的方法将查询参数添加到 URL 并以这种方式获取新的 JSON 对象。

只是在我走这条路线之前寻找一些反馈，看看是否有更好的方法？

【问题讨论】：

标签： javascript json vue.js axios

【解决方案1】：

如果你想传递一个对象，你可以使用.get 的第二个参数：

axios.get(this.jobsListURL, {
  params: this.axiosParams
})

这几乎相同，但您不必对 URL 进行字符串操作。

您可以像这样构建该对象：

computed: {
    axiosParams() {
        const params = new URLSearchParams();
        params.append('param1', 'value1');
        params.append('param2', 'value2');
        return params;
    }
}

【讨论】：

这记录在第二个 GET 请求示例 here
@Jeff 谢谢！出于某种原因查看文档，我一定错过了这一点。我将沿着我开始的路线走这条路。
@George 在 2018 年 12 月提供的链接指向这个版本：github.com/axios/axios/blob/… 但是我仍然没有看到这样的第二个 GET 请求示例
@fedorqui'SOstopharming' 这是第二个 axios.get，或者在评论“// 上面的请求也可以作为”之后，今天查看 currect readme 仍然是一样的，除非您的意思是计算属性，在这种情况下它只是 javascrip webapi 的一部分，很确定它可能只是一个普通对象，因为我认为 axios 会为您编码值，但最好是安全而不是抱歉！
@George 哦，是的，我指的是 Jeff 出色答案的第二部分，他提到了如何构建对象（如果您不止一次提供相同的参数并且想要避免param[] 的事情，仍然得到param；这也在Multiple fields with same key in query params (axios request)? 中解释）。感谢更新

【解决方案2】：

如果 this.AxiosParams 是像 { "posttype": "new" } 这样的 json 对象，这将起作用：

axios.get(this.jobsListURL, this.AxiosParams)

但是当值是数组时这不起作用，那么你可以添加一个 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);

【讨论】：