Question

我有一个返回承诺的函数：

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打印到控制台，我不知道原因。我希望这等到我在打印到控制台之前单击按钮，因为我必须在单击按钮后返回的数据中创建一个表。感谢您的帮助。

Answer 1

这种情况正在发生，因为你声明一个函数，而不是在addEventListener中传递引用，你可以这样做：

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

Answer 2

我认出了这些人，对不起该帖子。

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

我错过了一个箭头......

我正在使用事件处理程序探索JavaScript Promises

2 个答案: