Как работать с аснхронностью в пределах класса?

Question

[Quintis]

Что надо сделать что бы консоль логи выводили не null а количество полученных данных ?

class Test {
  constructor(){
    this.data = null;
  }
  method1 (){
    let xhr = new XMLHttpRequest();

xhr.open('GET', '/article/xmlhttprequest/example/load');

xhr.send();

xhr.onload = ()=> {
  if (xhr.status != 200) {
    alert(`Ошибка ${xhr.status}: ${xhr.statusText}`); // Например, 404: Not Found
  } else {
    console.log(`Готово, получили ${xhr.response.length} байт`); // response -- это ответ сервера
    this.data = xhr.response.length
  }
};

  }
  method2(){
    console.log(this.data + " method2 ")
  }
  method3(){
    console.log(this.data + " method3 ")
  }
}

const t = new Test()
t.method1()
//t.method2()
//t.method3()

Answer 1

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

класс, не класс — тут не при чём. Надо разобраться с асинхронностью: коллбеками и промисами. Пришло время.

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

spoiler

class Test {
  constructor() {
    this.data = null;
  }

  method1() {
    return new Promise((resolve, reject) => {
      let xhr = new XMLHttpRequest();

      xhr.open('GET', '/article/xmlhttprequest/example/load');
      
      xhr.onload = () => {
        if (xhr.status != 200) {
          alert(`Ошибка ${xhr.status}: ${xhr.statusText}`);
          reject();  // облом!
        } else {
          console.log(`Готово, получили ${xhr.response.length} байт`);
          this.data = xhr.response.length
          resolve(); // выполнили обещание!
        }
      };

      xhr.send();
    })
  }

  method2() {
    console.log(this.data + " method2 ")
  }

  method3() {
    console.log(this.data + " method3 ")
  }
}

const t = new Test()
t.method1()
  .then(() => t.method2())
  .then(() => t.method3())

Или с этим же классом:

async function main() {
  const t = new Test();
  await t.method1();
  t.method2();
  t.method3();
}

main();

Comments

[Quintis]

Напишите пожалуйста как бы вы решили. Через колбеки и геттер для методов я могу сделать , но тогда на каждом методе будет отправляться запрос

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

Quintis, добавил пример в ответ. Не проверял

[Quintis]

Сергей Соколов, тоесть через очередь
t.method1()
t.method2()
t.method3()
никак не сделать ?

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

Quintis, 2-й и 3-й вызовы не могут идти сразу – надо дождаться отработки запроса, которая займёт неизвестно, сколько времени. Поэтому 3 варианта:

1. коллбеки
   
2. промисы
   
3. промисы и async await для красоты
   

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

через очередь

Quintis, очередь как раз и есть цепочка Promise .then() .then()

[Quintis]

Сергей Соколов, Спасибо

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

для красоты записи можно всё это делать внутри асинхронной функции, но сути не меняет:

async function mainRun() {
  await t.method1(); // надо вернуть Promise
  t.method2()
  t.method3()
}

mainRun();

[Quintis]

Сергей Соколов,

class Test {
  constructor() {
    this.data = null;
  }
  method1() {
   return fetch(
      "https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits"
    )
      .then((response) => response.json())
      .then((commits) => {
        this.data = commits[0].author.login;
        console.log(commits[0].author.login);
      });
  }
  method2() {
    console.log(this.data + " method2 ");
  }
  method3() {
    console.log(this.data + " method3 ");
  }
}

const t = new Test();
t.method1()
.then(()=>t.method2())

или так ?

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

Quintis, да, так лучше. fetch() возвращает Promise.

[Quintis]

Сергей Соколов, я понял , спасибо