javascript - 如何用条件打破axios promise ？

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 并在响应为空时中断函数。正如您在上面的代码中看到的那样，我在另一个 then 中放置了一个条件，但是在 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;
});