Comment casser la promesse axios avec conditionnel?

Question

Dans une application vue.js, j'ai cette partie qui traite des données pour fetching illimité 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;  
    }; 

Je veux arrêter le rendu vide jokes et sortir de la fonction si la réponse est vide. Comme vous pouvez le voir dans le abouve de code, je mets un conditionnel dans un autre temps, mais obtiens l'erreur sur le if:

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

Je me demande quelle est la bonne façon d'y parvenir?

Answer 1

Le problème dans votre code est que votre then rappel défini de manière incorrecte.

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

Vous devez envelopper avec des supports {}:

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

Un autre problème est que, vous avez défini un rappel then supplémentaire et valide de manière incorrecte ce tableau jokes est un vide (au lieu de this.jokes.length === null, validons que il est défini et sa longueur est égale à zéro):

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

Answer 2

Vous avez à attach une fonction callback à thenpromesse.

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

ou utiliser une fonction arrow et wrap la condition avec {}.

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