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

上出现错误

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

所以我想知道实现此目标的正确方法是什么？

Answer 1

你必须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")
      } 
    }
})

Answer 2

您的代码中的问题是您的 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;
});

如何用条件打破axios承诺？

How to break axios promise with conditional?

javascript

promise

vue.js

axios