Java语句在if语句中等待保留关键字错误

Question

I am writing a small JS script where a user enters his IBAN and after entering the first 12 characters I am requesting the bank name and BIC from a different URL. As I have to wait for this request to finish, I made my function asynchronous and added an 'await' to the request. However, my script is no longer compiling with the following Error: 'Parsing error: await is a reserved word' pointing to my newly added 'await'. As this 'await' is inside several if conditions, i figured this might be the problem. However, it needs to be inside these if conditions. So does anyone has an idea what I am doing wrong and how to get the await inside the if condition?

This is my code:

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

You can only await inside a function that is declared as async .

The ibanData.oninput function is not declared that way.

Answer 2

You can convert the event as a promise but should listen to an error as well (if that exists) or it'll never continue if it fails in some way:

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);
      }
    }
  }
}

The problem with the code above is that oninput probably fires multiple times but you can only resolve the promise once. If that is the case then you can resolve it only if certain conditions are met:

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

That was just an example, you have to see what would work in your case.