Как асинхронно передать данные с XMLHttpRequest?

Question

[Quintis]

Как передать значение c XMLHttpRequest запроса в переменную класса this.VideoUrl при асинхронности ?

class Test{
  constructor() {
    this.VideoUrl = "";
    this.url = "https"
  }
  getUrl(){
    let xhr = new XMLHttpRequest();

    xhr.open("GET", this.url, true);

    xhr.send();

    let transfer =(x)=>{
      this.urlToVideo = x;
    }

    function handler() {
      let VideoUrl = this.responseXML
      transfer(VideoUrl);
    }
    
    
    xhr.onload = handler;

  }
  log(){
    console.log(this.urlToVideo)
  }
}

Comments

[Alex]

Так у вас же уже сделано.

[Quintis]

Alex, не работает (

[Alex]

Quintis, Увы, гадать по чайным листьям я не умею :) В следующий раз -- формулируйте вопрос подробнее:
- Что хотите получить
- Что сделали
- Что не работает
- Как пробовали решить проблему
- Почему это не помогло

[Quintis]

Alex, нужно что б log метод сработал и через console.log() вывел url , после метода класса getUrl

[Quintis]

Alex, если синхронно xhr.open("GET", this.url, true); то все работает , но браузер показывает предупреждение что так делать не стоит :
" [Deprecation] Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/."

Answer 1

[Alex]

Quintis, Вот, чисто наугад, вы пытаетесь сделать что-то такое?

test.getUrl()
test.log()

Если да, то это не будет работать. Потому, что порядок выполнения следующий:

1. Вызов getUrl
   
2. Начало отправка запроса
   
3. Назначение обработчика onload
   
4. Вызов log
   
5. Ожидание ...
   
6. Возврат ответа от сервера
   
7. Вызов transfer
   

Вам нужен механизм, чтобы вызывать log ПОСЛЕ возвращения запроса. Например promise или callback

Comments

[Quintis]

test.getUrl()
test.log()

да , точно так ) хотел только что дописать )

[Alex]

Quintis, https://learn.javascript.ru/async

[Quintis]

Я так понял нужно обявить метод в колбеке transfer ? Но как тогда исправить ошибку "
TypeError: test.start is not a function" , ведь метод определяется также асинхронно

let transfer =(x)=>{
      this.urlToVideo = x;
      this.log = ()=>{
         console.log(this.urlToVideo )
      }
    }

    function handler() {
      let VideoUrl = this.responseXML
      transfer(VideoUrl);
    }

[Quintis]

Alex У меня получилось с помощью геттера выполнять сначала загрузку а потом делать с url всьо что угодно через test.getUrl() и test.log. Является ли методом test.log ?

class Test{
  constructor() {
    this.VideoUrl = "";
    this.url = "https"
  }
  getUrl(){
    let xhr = new XMLHttpRequest();

    xhr.open("GET", this.url, true);

    xhr.send();

    let transfer =(x)=>{
      this.urlToVideo = x;
    }

    function handler() {
      let VideoUrl = this.responseXML
      transfer(VideoUrl);
    }
    
    
    xhr.onload = handler;

  }
get  log(){
     this.getUrl()
    console.log(this.urlToVideo)
  }
}