如何打破axios承諾與條件？

Question

在vue.js的應用程序，我有這個部分，與無限的分頁取數據涉及：

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

我想停止渲染空jokes，打破了該功能的響應是否爲空。正如你可以在代碼abouve看，我把其他有條件的話，但對if得到錯誤：

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

所以我不知道什麼是實現這一目標的正確方法是什麼？

Answer 1

您的代碼中的問題是您的then回調定義不正確。

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

你需要用括號{}把它包起來：

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

的另一個問題是，你定義了一個額外的then回調，並錯誤地驗證了jokes陣列是一個空的（而不是this.jokes.length === null，驗證它的長度等於零）：

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

Answer 2

你必須attach一個callback功能then承諾。

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

，或者使用arrow功能和wrap與{}的條件。

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