web-dev-qa-db-ja.com

VueでAxiosを使用してURLにクエリパラメーターを渡す最良の方法は？

私が達成しようとしているのは、ページが最初にロードされるときに、ベースURLを使用してAxiosを使用して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オブジェクトを取得するより良い方法があるかどうかはわかりません。

このルートをはるかに下回ってから、より良いアプローチがあるかどうかを確認する前に、フィードバックを探していますか？

javascriptjsonvue.jsaxios
6
user9664977

代わりにオブジェクトを渡す場合は、.getの2番目の引数を使用できます。

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

これはほとんど同じですが、URLの文字列操作を行う必要はありません。

次のようにそのオブジェクトを構築できます。

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

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);
1
Simsteve7