web-dev-qa-db-fra.com

La meilleure façon de passer des paramètres de requête à une URL en utilisant Axios dans Vue?

Ce que j'essaie d'accomplir, c'est lorsque la page se charge pour la première fois, j'utiliserai Axios en utilisant l'URL de base pour retirer un objet JSON. Je veux ensuite ajouter des paramètres de requête à l'URL de base lorsqu'un bouton est cliqué. Donc, quelque chose dans le sens de si l'URL de base est "test.com" lorsque le bouton est cliqué, un paramètre de requête serait ajouté à l'URL et Axios s'exécuterait à nouveau en retirant un autre objet JSON. L'URL pourrait donc ressembler à "test.com?posttype=new".

Ce que je fais actuellement est de créer run Axios avec l'URL de base et lorsque vous cliquez sur le bouton, exécutez une méthode qui exécute à nouveau Axios mais cette fois, il ajoute les paramètres de requête à l'URL ainsi dans Vue ça ressemble à:

 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)
  },

Ainsi, dans l'exemple ci-dessus, jobsListURL est l'URL de base de l'objet JSON et AxiosParams est une méthode que j'appelle pour ajouter les paramètres à l'URL lorsque vous cliquez sur le bouton. Ainsi, lorsque le bouton est cliqué, il exécute la méthode getJobs pour réexécuter Axios en utilisant l'URL avec les paramètres. Je ne sais pas si c'est la meilleure approche pour cela ou s'il existe une meilleure façon d'ajouter des paramètres de requête à l'URL et de saisir le nouvel objet JSON de cette façon.

Vous cherchez simplement des commentaires avant d'aller plus loin dans cette voie pour voir s'il y a une meilleure approche pour cela?

javascriptjsonvue.jsaxios
6
user9664977

Vous pouvez utiliser le deuxième argument pour .get si vous voulez passer un objet à la place:

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

C'est à peu près la même chose, mais vous n'avez pas à faire de manipulation de chaîne pour l'URL.

Vous pouvez créer cet objet comme ceci:

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

si this.AxiosParams est un objet json comme {"posttype": "new"}, cela fonctionnera:

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

Mais cela ne fonctionne pas lorsque les valeurs sont des tableaux, vous pouvez alors ajouter un 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