Javascript Await зарезервированное ключевое слово внутри ошибки if

Question

Я пишу небольшой JS-скрипт, в котором пользователь вводит свой IBAN, и после ввода первых 12 символов запрашиваю название банка и BIC с другого URL.Поскольку мне приходится ждать завершения этого запроса, я сделал свою функцию асинхронной и добавил к запросу «ожидание».Однако мой сценарий больше не компилируется со следующей ошибкой: «Ошибка синтаксического анализа: await - зарезервированное слово», указывающее на недавно добавленное «await».Поскольку это «ожидание» внутри нескольких условий, я решил, что это может быть проблемой.Тем не менее, он должен быть внутри этих условий.Так кто-нибудь имеет представление о том, что я делаю неправильно и как получить ожидание в условии if?

Это мой код:

function requestBICandBankname(country, bban) {
  return new Promise(function (resolve, reject) {
    const xhr = new XMLHttpRequest();
    const url = URL + country.toUpperCase() + '/' + bban;

    xhr.open('GET', url, true);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        return resolve(xhr.response);
      }
      return reject({
        status: this.status,
        statusText: xhr.statusText
      });

    };
    xhr.onerror = function () {
      return reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();

  });
}

async function initLookup() {
  const ibanData = document.getElementById('iban-details');
  let country = '';
  let bban;

  if (ibanData !== null) {
    ibanData.oninput = function (event) {
      const iban = ibanData.value;

      if (iban.length === 12) {
        country = iban.substr(0, 2);
        bban = iban.substr(4, 12);
        try {
          const bankdata = await requestBICandBankname(country, bban);
          console.log('bankdata', bankdata);
        } catch (err) {
          console.log(err);
        }
      }
    };
  }

};

export {
  initLookup
};

JSFiddle

Answer 1

Вы можете преобразовать событие как обещание, но следует также прослушать ошибку (если она существует), или она никогда не будет продолжаться, если произойдет какое-либо сбой:

const inputAsPromise = (ibanData) =>
  new Promise((resolve, reject) => {
    ibanData.oninput = resolve;
    //@todo: onerror should be reject
  });
async function initLookup() {
  const ibanData = document.getElementById('iban-details');
  let country = '';
  let bban;

  if (ibanData !== null) {
    await inputAsPromise(ibanData);
    const iban = ibanData.value;

    if (iban.length === 12) {
      country = iban.substr(0, 2);
      bban = iban.substr(4, 12);
      try {
        const bankdata = await requestBICandBankname(
          country,
          bban,
        );
        console.log('bankdata', bankdata);
      } catch (err) {
        console.log(err);
      }
    }
  }
}

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

const inputAsPromise = (ibanData) =>
  new Promise((resolve, reject) => {
    ibanData.oninput = (e)=>ibanData.value.length === 12?resolve():'';
    //@todo: onerror should be reject
  });

Это был только пример, вы должны посмотреть, что будет работать в вашем случае.

Answer 2

Вы можете только await внутри функции, которая объявлена ​​как async.

Функция ibanData.oninput не объявлена ​​таким образом.