VUE -axios GET does not execute

Question

My vue porject use axios to send HTTP request.

There is no problem running on Android.

When running on IOS, occasionally the HTTP request is not sent.

But not every IOS mobile phone will have this situation, this kind of problem can only be solved by uninstalling and reinstalling the APP.

getInfo() {
  let params = { device_id: this.info_id.device_id };
  axios.get(device_detail, params, this.headers).then(res => {
    if (!res.code) {
      this.product_id = res.data.device_type;
      this.home_id = res.data.home_id;
      localStorage.setItem("product_id", this.product_id);
      localStorage.setItem("home_id", this.home_id);
      localStorage.setItem("product_num_id", res.data.product_id);
      localStorage.setItem("classify_id", res.data.classify_id);
      this.getFuncList();
    }
  });
},


get(url, param, headers) {
    return new Promise((resolve, reject) => {
      axios({
        method: "get",
        url,
        params: param,
        headers: headers
      }).then(res => {
        resolve(res);
      });
    });
  },
this.headers = {
  token: this.token,
  appid: this.appid,
  lang:  this.$i18n.locale,
};

getInfo() run in created()

I use localStorage.setItem() to save data like "token" "appid".

I found that axios does not executed, I don`t know why,but if you uninstalling and reinstalling the APP,problem solved.

why????

excuse my poor english.

Answer 1

It's been a while since I've last used vue.js but as far as I remember you need to define getInfo() function as async since it calls a function which returns a promise. Other than that, by using await, waiting for result of the get function could solve your problem. I might be completely wrong though :)

Answer 2

Try using async/await instead -- your code will be more legible and consistent with Vue's approach to aysnchronous methods. Also wrap your awaits in a try/catch block. That way, you'll be able to see exactly what the error is when it fails and therefore why it's failing.

async getInfo() {
  try {
    let params = { device_id: this.info_id.device_id };
    const res = await axios.get(device_detail, params, this.headers);
    if (!res.code) {
      this.product_id = res.data.device_type;
      this.home_id = res.data.home_id;
      localStorage.setItem("product_id", this.product_id);
      localStorage.setItem("home_id", this.home_id);
      localStorage.setItem("product_num_id", res.data.product_id);
      localStorage.setItem("classify_id", res.data.classify_id);
      this.getFuncList();
    };
    return true;
  } catch(err) {
    console.error(err);
  }
},


async get(url, param, headers) {
  try {
    const res = await axios({
      method: "get",
      url,
      params: param,
      headers: headers
    });
    return res;
  } catch(err) {
    console.error(err);
  }
}