Как записать данные в переменную после выполнения axios?

Question

[Gauthier]

Добрый день! Пишу такой класс:

class Address {
   address = null;
   data = [];
  
   data() {
     return this.data;
   }
   
   constructor(address) {
     this.address = address;
     
     const fetchInformation = () => {
        return axios.get(`${API_BASE}/getAddressInformation`, {
           params: {
             address: this.address
           }
       }).then(({ data }) => this.data = data);
     }
     
     fetchInformation();
   }
}

const address = new Address(TEST_WALLET);
console.log(address);

Столкнулся с проблемой, что data остаётся как и была. Как можно было бы сделать, чтоб в переменную записывались данные после выполнения axios?

Answer 1

[Сергей Соколов]

Опять кто-то не понял асинхронности.

axios.get() возвращает Promise. Его метод .then() выполнится не сразу, а когда-то потом, когда будет получен результат запроса. Представьте, что интернет очччеенньь мееедленнныыыйй.

Зато остальной код выполняется привычно сразу («синхронно»). В т.ч. и console.log() в последней строке – сразу же за созданием объекта. Но на тот момент веб-запрос ещё не выполнился.

TL&DR надо ждать. Это можно делать несколькими способами: коллбэком, промисами, обёрткой вокруг них async/await.

Например

class Address {
  address = null;
  data = [];
 
  data() {
    return this.data;
  }
  
  constructor(address) {
    this.address = address;
  }    

  fetchInformation() {
    return axios.get(`${API_BASE}/getAddressInformation`, {
      params: {
        address: this.address
      }
    }).then(({ data }) => this.data = data);
  }
}

async function initialize() {
  const address = new Address(TEST_WALLET);
  await address.fetchInformation();
  console.log(address);
}

initialize();

Comments

[Gauthier]

Спасибо за ответ.
А как можно это сделать в самом классе? Чтоб на выходе я получал, например, address.data()?

Пробовал через

Promise.allSettled([fetchInformation()]).then(res => this.data = res)

в constructor.

fetchInformation() {
    return axios.get(`${API_BASE}/getAddressInformation`, {
      params: {
        address: this.address
      }
    }).then(({ data }) => data);
  }

[Сергей Соколов]

Gauthier, можно только возвращать из класса Promise. Который позже отресолвится в желаемое значение:

как-то так

class Address {
  address = null;
  data = [];
 
  data() {
    return this.data;
  }
  
  constructor(address) {
    this.address = address;
    this.fetchInformation();
  }    

  fetchInformation() {
    this.promise = axios.get(`${API_BASE}/getAddressInformation`, {
      params: {
        address: this.address
      }
    }).then(({ data }) => {
      this.data = data;
      return this.data;
    });
  }
}

const address = new Address(TEST_WALLET);
address.promise.then(console.log); // в консоль выведет позже..
console.log('ждите ответа'); // ..чем это

[Gauthier]

Сергей Соколов, А если в какой-то стор поместить ответ? На реакте знаю способы, а на чистом ноде не особо

[Сергей Соколов]

Gauthier, стор, глобальная переменная — всё это никак не меняет времени: данные появятся «там» не сразу, а потом. Как с обработкой события нажатия на кнопку.

Но это, по идее, не должно вызывать никаких сложностей. Просто раскидайте весь код по функциям, классам-методам. Чтобы не было почти никакой нагрузки в главном main.js с простынёй последовательных синхронных инструкций. Вместо этого — куча функций наготове. И вызывать ту, другую, эту – по событиям. Нажали кнопку – вызывали f1(); получили ответ от fetch() – вызвали f2().