About Vue. How to encapsulate Axios to reduce request code redundancy-CodePudding

Now I'm writing a project using Vue.I used a lot of Axios requests, How to encapsulate the request code to reduce redundancy.

getProvinces() {
  this.axios
    .get(this.gv.serverUrl   "/location/province/list")
    .then((res) => {
      this.location.province.provinces = res.data.data;
    });
},
getCities() {
  this.axios
    .get(this.gv.serverUrl   "/location/city/list", {
      params: {
        pid: this.location.province.province,
      },
    })
    .then((res) => {
      this.location.city.cities = res.data.data;
    });
},
getCountries() {
  this.axios
    .get(this.gv.serverUrl   "/location/country/list", {
      params: {
        cid: this.location.city.city,
      },
    })
    .then((res) => {
      this.location.country.countries = res.data.data;
    });
},

CodePudding user response：

You could create a method that makes the axios call, passing the path and the params (as an optional argument). So a method that could work for the code you are providing could be:

fetch(resource, params) {
  return this.axios.get(this.gv.serverUrl   `/location/${resource}/list`, { params })

This fetch method would return a promise, and your methods would look like this:

getProvinces() {
  this.fetch("/location/province/list")
    .then((res) => {
      this.location.province.provinces = res.data.data;
    });
},
getCities() {
  this.fetch("/location/city/list", { pid: this.location.province.province })
    .then((res) => {
      this.location.city.cities = res.data.data;
    });
},
getCountries() {
  this.fetch("/location/country/list", { cid: this.location.city.city})
    .then((res) => {
      this.location.country.countries = res.data.data;
    });
},

A further refactor could be conducted if there was some kind of uniformity in the data property of the Vue instance. I cannot see the shape of your data property, but from what I see it looks something like this:

data() {
  return {
    location: {
       province: {
         provinces: [...],
       },
       city: {
         cities: [...],
       },
       country: {
         countries: [...],
       },
    }
  }
}

If you could change it to something like this:

data() {
  return {
    location: {
       province: {
         list: [...],
       },
       city: {
         list: [...],
       },
       country: {
         list: [...],
       },
    }
  }

Then the refactor of the methods could be this:

fetch(resource, params) {
  return this.axios
    .get(this.gv.serverUrl   `/location/${resource}/list`, { params })
    .then((res) => {
      this.location[resource].list = res.data.data;
    })

getProvinces() {
  this.fetch("/location/province/list")
},
getCities() {
  this.fetch("/location/city/list", { pid: this.location.province.province })
},
getCountries() {
  this.fetch("/location/country/list", { cid: this.location.city.city})
},

CodePudding user response：

Use Axios.all to do concurrent requests. That will help you to encapsulate status of all requests. Not exactly but something like this given below:

let endpoints = [
  'https://this.gv.serverUrl   "/location/province/list"',
  'https://this.gv.serverUrl   "/location/city/list"',
  'https://api.github.com/users/ejirocodes/followers',
  'https://api.github.com/users/ejirocodes/following'
];
axios.all(endpoints.map((endpoint) => axios.get(endpoint))).then(
     (data) => console.log(data),
)

Here is the link for more help and good explanation: https://blog.logrocket.com/using-axios-all-make-concurrent-requests/