Я не могу получить ответ JS в переменной, которая говорит, что это ноль

Question

Когда я подключаю axion в методе get, я получаю ответ от моего API и хочу напечатать информацию на сайте.

Я пытался изменить эту строку:

 .then(response => (this.username= response.data.username)) or this
 .then(response => (this.username= response.data[0].username)) or this 
 .then(response => (this.username= response.data.username[0]))

Сценарий

<script>
   import axios from 'axios';

   export default {
     name: "acount",
     el: '#app',
     data() {
       return {
         username: null,
         pseudo: null,
         email: null,
         date: null,
       };
   },
   mounted () {
     axios
      .get('http://127.0.0.1:8080/api/user/65', {
      headers: {
      token: ''
      }
  })
    .then(response => (this.username= response.data[0].username[0]))
    .then(response => (this.pseudo = response.data.pseudo))
    .then(response => (this.email = response.data.email))
    .then(response => (this.date = response.data.create_at))
  }
}
</script>

Answer 1

Эта функция стрелки использует неявно возвращаемое значение:

.then(response => (this.username= response.data[0].username[0]))

В результате параметр response в следующем then будет равен this.username. Чтобы избежать таких ошибок, можно использовать правило ESLint no-return-assign.

Вместо этого должно быть:

.then(response => {
  this.username= response.data[0].username[0];
  return response;
})

Несколько then не нужны, потому что нет нескольких обещаний для цепочки. Их можно переписать в один then:

 axios.get(...)
    .then(response => {
        this.username= response.data[0].username[0]);
        ...
    });

Answer 2

Чтобы связать обещания, каждая функция в then () должна возвращать значение. кроме этого мы могли бы помочь, только если бы знали, как выглядит фактический ответ.

new Promise(function(resolve, reject) {

  setTimeout(() => resolve(1), 1000); // (*)

}).then(function(result) { // (**)

  alert(result); // 1
  return result * 2;

}).then(function(result) { // (***)

  alert(result); // 2
  return result * 2;

}).then(function(result) {

  alert(result); // 4
  return result * 2;

});