Question

我想要完成的是页面首次加载时，我将使用Axios使用基本URL来拉回JSON对象。然后，我想在单击按钮时将查询参数添加到基本URL。因此，如果在单击按钮时基本URL为“ test.com”，则将向URL添加查询参数，并且Axios将再次运行以拉回另一个JSON对象。因此，该网址可能类似于“ 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对象。

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

Answer 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;
    }
}

Answer 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);

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

2 个答案: