vikkyshostak
@vikkyshostak
< This head full of dreams.

Почему возникает undefined при вызове метода из export класса (ES6)?

Доброго времени года!

Никак не пойму, почему возникает undefined при вызове метода из export класса.

Разбираюсь с ES6 (да, я совсем нуб в ванильном JS) и хочу сделать человеческий способ кастомной сборки своего многострадального goodshare.js для разработчиков (с возможностью настроить всё под себя, точечно). Собираю всё с помощью Webpack.

// ./src/Providers/Vkontakte.js

export class Vkontakte {
  constructor(url = document.location.href,
              title = document.title,
              description = document.head.querySelector("meta[name=description]").content) {
    this.url = url;
    this.title = title;
    this.description = description;
  }
  
  getCounter() {
    let xhr = new XMLHttpRequest();
    let api = 'https://vk.com/share.php?act=count&index=1&url=' + encodeURIComponent(this.url);
    
    xhr.open('GET', api, true);
    xhr.send();
    
    xhr.onreadystatechange = () => {
      if (this.readyState != 4) return;
      if (this.status != 200) {
        console.log('Vkontakte provider error: ' + (this.status ? this.statusText : 'response not send!'));
        return;
      }
      
      let obj = this.responseText.match(/^VK\.Share\.count\(\d, (\d+)\);$/)[1] / 1;
      return obj;
    }
  }
}

Далее, в главном файле собираю всё в кучу:

// ./index.js

import { Vkontakte } from './src/providers/Vkontakte';

let vk_count = new Vkontakte().getCounter();

console.log(vk_count); // почему-то даёт undefined

Подскажите, что я делаю не так? Спасибо.
  • Вопрос задан
  • 316 просмотров
Решения вопроса 2
@Sayonji
В vk_counter вы кладёте результат выполнения getCounter(). Эта функция ничего не возвращает, что эквивалентно возврату undefined.
Ответ написан
@Aves
getCounter ничего не возвращает. xhr работает асинхронно, obj надо получать через callback или Promise.
getCounter(cb) {
    let xhr = new XMLHttpRequest();
    let api = 'https://vk.com/share.php?act=count&index=1&url=' + encodeURIComponent(this.url);
    
    xhr.open('GET', api, true);
    xhr.send();
    
    xhr.onreadystatechange = () => {
      if (this.readyState != 4) return;
      if (this.status != 200) {
        console.log('Vkontakte provider error: ' + (this.status ? this.statusText : 'response not send!'));
        return;
      }
      
      let obj = this.responseText.match(/^VK\.Share\.count\(\d, (\d+)\);$/)[1] / 1;
      cb(obj);
    }
  }

new Vkontakte().getCounter(count => console.log(count));

getCounter() {
    return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    let api = 'https://vk.com/share.php?act=count&index=1&url=' + encodeURIComponent(this.url);
    
    xhr.open('GET', api, true);
    xhr.send();
    
    xhr.onreadystatechange = () => {
      if (this.readyState != 4) return;
      if (this.status != 200) {
        console.log('Vkontakte provider error: ' + (this.status ? this.statusText : 'response not send!'));
        return;
      }
      
      let obj = this.responseText.match(/^VK\.Share\.count\(\d, (\d+)\);$/)[1] / 1;
      resolve(obj);
    }
  });
  }

new Vkontakte().getCounter().then(count => console.log(count));


Кстати onreadystatechange будет работать неправильно, this будет указывать на инстанс Vkontakte, а не на xhr.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы