Я изучаю обещания JavaScript с обработчиками событий - PullRequest
Новая
       8

Я изучаю обещания JavaScript с обработчиками событий

0 голосов
/ 02 июня 2018

У меня есть функция, которая возвращает обещание: 

const getCountry = countryCode =>
  new Promise((resolve, reject) => {
    const countryRequest = new XMLHttpRequest();

    countryRequest.addEventListener('readystatechange', e => {
      if (e.target.readyState === 4 && e.target.status === 200) {
        const data = JSON.parse(e.target.responseText);
        const country = data.find(
          country => country.alpha2Code === countryCode
        );
        resolve(country);
      } else if (e.target.readyState === 4) {
        reject('Unable to fetch data');
      }
    });

    countryRequest.open('GET', 'http://restcountries.eu/rest/v2/all');
    countryRequest.send();
  });

Это прекрасно работает.Проблема в следующем фрагменте. 

const btn = document.getElementById('clickme');

btn.addEventListener(
  'click',
  getCountry('US').then(
    country => {
      console.log('this is from the resolve');
    },
    err => {
      console.log(err);
    }
  )
);

Моя проблема в том, что я получаю this is from the resolve печать на консоль, прежде чем нажимаю кнопку, чтобы запустить событие, и я не знаю, почему.Я хочу подождать, пока я нажму кнопку, прежде чем она будет напечатана на консоли, потому что мне нужно создать таблицу из данных, которые возвращаются ПОСЛЕ нажатия кнопки.Спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 02 июня 2018

Это происходит потому, что вы объявляете функцию, вместо передачи ссылки внутри addEventListener вы можете сделать это вместо этого: 

btn.addEventListener(
  'click',
 ()=> { getCountry('US').then(
    country => {
      console.log('this is from the resolve');
    },
    err => {
      console.log(err);
    }
  )}
);
0 голосов
/ 02 июня 2018

Я разобрался, ребята, извините за пост. 

btn.addEventListener(
  'click', () =>
  getCountry('US').then(
    country => {
      console.log('this is from the resolve');
    },
    err => {
      console.log(err);
    }
  )
);

Мне не хватало стрелки ...

...