javascript - 在 Vue 中使用 Axios 将查询参数传递给 URL 的最佳方式？

Question

我想要完成的是，当页面首次加载时，我将使用 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 对象。

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

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