In a vue.js app, I have this part that deals with the fetching data for unlimited pagination:

fetchData() {
      this.loading = true
      this.page++;
      axios.get(this.BASE_URL + '/api/jokes/'+'?page='+this.page).then( response => 
            this.jokes = response.data)
           .then( if (this.jokes.length == null) {throw new Error("end of pagination")} )
           .catch(function (error) {
           });      
     document.body.scrollTop = document.documentElement.scrollTop = 0;
     this.loading = false;    
  };

I want to stop rendering empty jokes and break out of the function if the response is empty. As you can see in the code abouve, I put a conditional in another then, but get error on the if:

Module build failed: SyntaxError: Unexpected token (169:20)

So I'm wondering what's the correct way to achieve this?

In a vue.js app, I have this part that deals with the fetching data for unlimited pagination:

fetchData() {
      this.loading = true
      this.page++;
      axios.get(this.BASE_URL + '/api/jokes/'+'?page='+this.page).then( response => 
            this.jokes = response.data)
           .then( if (this.jokes.length == null) {throw new Error("end of pagination")} )
           .catch(function (error) {
           });      
     document.body.scrollTop = document.documentElement.scrollTop = 0;
     this.loading = false;    
  };

I want to stop rendering empty jokes and break out of the function if the response is empty. As you can see in the code abouve, I put a conditional in another then, but get error on the if:

Module build failed: SyntaxError: Unexpected token (169:20)

So I'm wondering what's the correct way to achieve this?

• javascript
• promise
• vue.js
• axios

• Add brackets {} in then callback. – alexmac Commented Aug 29, 2017 at 12:48
• @alexmac can you elaborate how? I'm new to js stuff. – Karlom Commented Aug 29, 2017 at 12:50
• You don't have a function expression around you if statement. – Bergi Commented Aug 29, 2017 at 13:15

2 Answers 2

The problem in your code is that your then callback defined incorrectly.

.then(() => if (this.jokes.length == null) {throw new Error("end of pagination")})

You need to wrap it with brackets {}:

.then(() => {
  if (this.jokes.length == null) {
     throw new Error("end of pagination")
  }
})

Another problem is that, you defined one additional then callback and incorrectly validates that jokes array is an empty (instead of this.jokes.length === null, validate that it's defined and it's length equal to zero):

.then(response => { 
   let jokes = response.data;
   if (!jokes || jokes.length === 0) {
     throw new Error("end of pagination");
   }
   this.jokes = jokes;
});

You have to attach a callback function to then promise.

fetchData() {
  this.loading = true
  this.page++;
       axios.get(this.BASE_URL + '/api/jokes/'+'?page='+this.page).then(function( response){
          this.jokes = response.data;
          return this.jokes;
       }).then(function(response){
          if (!response || response.length == 0) {
            throw new Error("end of pagination")
          } 
       }).catch(function (error) {

       });        
   document.body.scrollTop = document.documentElement.scrollTop = 0;
   this.loading = false;    
}

or use an arrow function and wrap the condition with {}.

.then(()=>{
      if (this.jokes.length == null) {
          throw new Error("end of pagination")
      } 
    }
})