CODEWITHSUNDEEP
vue.jsrequestaxios
Jonathan Sigg
Jonathan Sigg

Reputation: 350

Vue + axios - change variable if last request is done

I want change variable loading only, if the last request is done. Because now, it's changing he variable loading if the first request is done.

This is the code

fetchData(page_url) {
  const self = this;
  self.loading = true;
  axios.get(page_url)
      .then(res => {
        self.loading = false;
      }).catch(err => {
        console.log(err)
  });
}

UPDATE:

This is where I call fetchData

<b-input @keyup="fetchDataFromSearch()" v-model="searchstr" type="text" placeholder="Search" class="mb-2"></b-input>

fetchDataFromSearch() {
      this.new_search = true;
      let page_url = `${this.apiurl}?page=1&orderby=${this.orderby}&ordertype=${this.ordertype}`;
      if(this.searchstr !== '') page_url = `${this.apiurl}?page=1&orderby=${this.orderby}&ordertype=${this.ordertype}&search=${this.searchstr}`;
      this.fetchData(page_url);
    },

Upvotes: 0

Views: 312

Answers (2)

Jonathan Sigg
Jonathan Sigg

Reputation: 350

I have the answer now. The code should look something like this:

<scrtipt>
export default {
  data() {
    return {
      loading: false,
      request: 0,
      requests: 0
    }
  },
  methods: {
    fetchData() {
      const self = this;
      self.requests = self.requests + 1;
      axios.get('/url')
        .then(res => {
          self.request = self.request + 1;
          if(self.requests == self.request) {
            self.loading = false;
          }
        }).catch(err => {
          console.log(err)
      });
    }
  }
}
</script>

Upvotes: 0

Amaarockz
Amaarockz

Reputation: 4674

you can do something like this

fetchData(page_url) {
  const self = this;
  self.loading = true;
  return axios.get(page_url)
     .catch(err => {
        console.log(err)
  });
}

and then the place where you need to call it repeatedly, intialize a promises array in your data and then keep pushing a promise everytime when you call it

this.promises.push(this.fetchData(page_url));

finally in the end you can resolve all the promises

Promise.all(this.promises).then(() => {
 this.loading = false;
});

Upvotes: 1

Related Questions