Vue.js axios Synchronize

problem description

vue.js axios request b needs the data returned after the successful axios request a. I store the data after the successful axios request a to a variable in data, but call a first and then b in the lifecycle hook function created, but cannot receive the data of function an in the b function.

the environmental background of the problems and what methods you have tried

I can"t save it in vuex

related codes

/ / Please paste the code text below (do not replace the code with pictures)

getUserInformation () {/ / get the information after the user logs in successfully

  let userInformation = {};
  let self = this;
  return new Promise((resolve,reject)=>{
    self.$axios.get(RESAPI.getNowUserInfo,{
      params: {}
    }).then(response=>{
      return resolve(response);
    })
  }).then((response)=>{
    let user = response.data.data;
    self.orgCode = user.orgCode;//bdataorgCode
    sessionStorage.setItem("user",user.orgCode);
  })
},
getAllServerRoomInfo() {//
  let URL = RESAPI.getAllServerRoomInfo;
  let self = this;
  console.log(self.orgCode)//a
  let org = sessionStorage.getItem("user");
  let data = {
    org_code: 1
  };
  return new Promise((resolve,reject)=>{
     self.$axios
    .get(URL, {
      params: data
    })
    .then(response => {
      return resolve(response);     
    })
    .catch(err => {
      return reject(err);
      console.log(err);
    });
  }).then((response)=>{
    self.allRoomData = response.data.data.datas;
    let device = JSON.stringify(response.data.data.datas);
    self.infos = response.data.data.infos;
    window.localStorage.setItem("devices",device);
    self.stageCanvas();
  })
},

what result do you expect? What is the error message actually seen?

May.08,2021

there are two methods
one is the callback nesting method
and the other is the es7 async/await method
first, the callback method.

//
getUserInformation() {
 let userInformation = {};
  let self = this;
  return new Promise((resolve,reject)=>{
    self.$axios.get(RESAPI.getNowUserInfo,{
      params: {}
    }).then(response=>{
      return resolve(response);
    })
  }).then((response)=>{
    let user = response.data.data;
    self.orgCode = user.orgCode; //bdataorgCode
    //sessionStorage.setItem("user",user.orgCode);  // 
    
    self.getAllServerRoomInfo(self.orgCode);   //getAllServerRoomInfo
    
  })
},
// value 
getAllServerRoomInfo(value) {
  let URL = RESAPI.getAllServerRoomInfo;
  let self = this;
  // console.log(self.orgCode)//a
  // let org = sessionStorage.getItem("user");
  let org = value;  //value a
  let data = {
    org_code: 1
  };
  return new Promise((resolve,reject)=>{
     self.$axios
    .get(URL, {
      params: data
    })
    .then(response => {
      return resolve(response);     
    })
    .catch(err => {
      return reject(err);
      console.log(err);
    });
  }).then((response)=>{
    self.allRoomData = response.data.data.datas;
    let device = JSON.stringify(response.data.data.datas);
    self.infos = response.data.data.infos;
    window.localStorage.setItem('devices',device);
    self.stageCanvas();
  })
},

the second is much simpler

async getUserInformation() {
  let userInformation = {};
  let self = this;
  var info,roomInfo;

  await info = self.$axios.get(RESAPI.getNowUserInfo,{params: {}})

  let URL = RESAPI.getAllServerRoomInfo;
  let data = {
      org_code: info.data.data.orgCode
  };
  
  await roomInfo = self.$axios.get(URL, {params: data})
    
  self.allRoomData = roomInfo.data.data.datas;
    let device = JSON.stringify(roomInfo.data.data.datas);
    self.infos = roomInfo.data.data.infos;
    window.localStorage.setItem('devices',device);
    self.stageCanvas();  
}

clipboard.png
created

athenb

clipboard.png

Menu