关于Vue。如何封装Axios以减少请求代码冗余

Question

现在我正在使用the编写一个项目，我使用了很多Axios请求，如何封装请求代码以减少冗余。

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

Answer 1

使用Axios.all执行并发请求。这将帮助您封装所有请求的状态。不完全是这样，但如下所示：

​

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

​

下面是获得更多帮助和更好解释的链接：https://blog.logrocket.com/using-axios-all-make-concurrent-requests/

Answer 2

您可以创建一个方法来进行axios调用，传递路径和参数(作为可选参数)。因此，您所提供的代码可以使用的方法是：

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

这个fetch方法将返回一个承诺，您的方法如下所示：

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

如果Vue实例的数据属性存在某种一致性，则可以进行进一步的重构。我看不到数据属性的形状，但从我所看到的情况看，它如下所示：

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

如果你能把它修改成这样的话：

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

那么方法的重构可以是这样的：

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