Почему я получаю ошибку "Uncaught (in Promise)" с этим?

Question

Итак, у меня есть цепочка then:

  ngOnInit() {
    this.contentfulService.getExhibits()
      .then(exhibits => this.exhibits = exhibits)
      .then(exhibits => {console.log("0", exhibits[0])})
      .then(exhibits => {console.log("1", exhibits[1])});
  }

Я получаю ошибку Uncaught (in promise): в секунду console.log. Я не могу понять, почему это так? Спасибо!

Answer 1

Немного проблем здесь:

Вы назначили this.exhibits = exhibits, но ничего не вернули. Таким образом, следующий .then() exhibits не доступен и, следовательно, вызывает проблему. Вы можете вернуть его как:

.then(exhibits => {
    this.exhibits = exhibits
    return exhibits
})

Хотя это может не понадобиться, поскольку вы нигде не используете this.exhibits. Таким образом, вы можете просто вернуть exhibits как:

.then(exhibits => exhibits)

Хотя это также не нужно, и вы можете просто удалить его и получить доступ к массиву exhibits, например:

this.contentfulService.getExhibits()
  .then(exhibits => {
    if(exhibits && exhibits.length){
      console.log("0", exhibits[0] || {})
      console.log("1", exhibits[1] || {})
    }       
  })

Или, если вы используете this.exhibits в другом месте, то вы можете использовать:

this.contentfulService.getExhibits()
  .then(exhibits => {
    this.exhibits = exhibits
    return exhibits
  })
  .then(exhibits => {
    if (exhibits && exhibits.length) {
      console.log("0", exhibits[0] || {})
      console.log("1", exhibits[1] || {})
    }
  })

---

Кроме того, при выполнении вызовов ajax всегда используется правильная обработка ошибок, т.е. catch, что полезно для Совершено sh новых действий даже после сбоя вызова ajax в цепочке, например:

this.contentfulService.getExhibits()
  .then(exhibits => {
    this.exhibits = exhibits
    return exhibits
  })
  .then(exhibits => {
    if (exhibits && exhibits.length) {
      console.log("0", exhibits[0] || {})
      console.log("1", exhibits[1] || {})
    }
  }).catch((error) => {
    console.error("Error: " + error);
  })

Answer 2

Вы не возвращаете ничего из первого .then во второе, поэтому exhibits не будет существовать ни в вашем втором .then (ни в вашем третьем).

Вы должны вернуть его с первого .then или записать его с this.exhibits.

Примерно так:

ngOnInit() {
  this.contentfulService.getExhibits()
    .then(exhibits => {
      this.exhibits = exhibits
      return exhibits
    })
    .then(exhibits => {
      console.log("0", exhibits[0])
      return exhibits
    })
    .then(exhibits => {
      console.log("1", exhibits[1])
    });
}

или, может быть, лучше

ngOnInit() {
  this.contentfulService.getExhibits()
    .then(exhibits => this.exhibits = exhibits)
    .then(exhibits => console.log("0", this.exhibits[0]))
    .then(exhibits => console.log("1", this.exhibits[1]));
}