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

Question

[Vic Shóstak]

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

Никак не пойму, почему возникает 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

Подскажите, что я делаю не так? Спасибо.

Answer 1

[Sayonji]

В vk_counter вы кладёте результат выполнения getCounter(). Эта функция ничего не возвращает, что эквивалентно возврату undefined.

Comments

[Vic Shóstak]

ээм.. то есть как это? а как же: return obj ?

[Sayonji]

Vikky Shostak: Это не в функции getCount, а в функции xhr.onreadystatechange.

[Vic Shóstak]

Sayonji: опаньки, спасибо ;)

Answer 2

[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.

Comments

[Vic Shóstak]

а как нужно onreadystatechange организовывать в моём случае?

[Aves]

Vikky Shostak: либо не через стрелочную функцию, а через обычную, либо вместо this xhr.

[Vic Shóstak]

Aves: огромное спасибо за комментарий! Буду курить доки тщательнее :)

[Sayonji]

Хочется еще прокомментировать, что раз автор использует webpack, то можно посмотреть в сторону Fetch API вместо xhr.

[Vic Shóstak]

getCounter() {
    let api = 'https://vk.com/share.php?act=count&index=1&url=' + encodeURIComponent(this.url);
    
    return fetch(api, {mode: 'cors'})
      .then(
        function (response) {
          if (response.status !== 200) {
            console.log('Status code: ' + response.status);
            return;
          }
          
          response.text()
            .then(
              function (count) {
                return count.match(/^VK\.Share\.count\(\d, (\d+)\);$/)[1] / 1;
              }
            )
        }
      )
      .catch(function (error) {
        console.log('Request failed: ' + error);
      });
  }

[Vic Shóstak]

Sayonji: Типа того? Вроде всё ок, возвращается объект Promise, в котором result равен моему значению после match(), но как получить его сразу, а не в составе объекта?

[Sayonji]

Vikky Shostak: Я не очень понимаю, о каком поле result речь. Получить число можно так, как написал выше Aves: new Vkontakte().getCounter().then(count => console.log(count));

[Vic Shóstak]

Sayonji: вернее, вот так –

getCounter() {
    let api = 'https://vk.com/share.php?act=count&index=1&url=' + encodeURIComponent(this.url);
    
    return fetch(api, {method: 'GET', mode: 'cors'})
      .then(this.checkStatus)
      .then(function (response) {
        return response.text();
      })
      .then(function (count) {
        return count.match(/^VK\.Share\.count\(\d, (\d+)\);$/)[1] / 1;
      })
      .catch(function (error) {
        console.log('Request failed!', error);
      });
  }

[Sayonji]

Vikky Shostak: Если checkStatus возвращает свой аргумент, то похоже на правду.

[Vic Shóstak]

Sayonji: я вот про этот result: https://yadi.sk/d/yInLP9GR33eUWG

[Sayonji]

Повторюсь: получить число можно так, как написал выше Aves: new Vkontakte().getCounter().then(count => console.log(count));
У вас библиотека для браузеров или для nodejs?

[Vic Shóstak]

Sayonji: NodeJS у меня. Да, получить число получается, просто хотелось бы вот так его получать (там, где нужно и столько, сколько нужно – например, при сумел лайков пригодится):

import 'whatwg-fetch';
import { Vkontakte } from './providers/Vkontakte';

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

console.log(vk_count);

[Aves]

C babeljs.io/docs/plugins/transform-async-to-generator можно примерно так

(async () => {
  const count = await new Vkontakte().getCounter();
  console.log(count);
})()

[Aves]

или точнее с babeljs.io/docs/plugins/transform-async-generator-...

[Vic Shóstak]

Aves: подскажите, пожалуйста, а почему это всё не работает с CORS (когда переношу на хостинг с локалки)? Пишет ошибку No 'Access-Control-Allow-Origin' header is...