Babel异步等待

Question

我花了最后几个小时尝试使它工作，但是没有明显的原因。 我具有所有必需的程序包和设置。 我没有任何错误， async并await只是不等待。

我使用Webpack要求Babel添加的polyfill文件， 例如 babel-runtime/regenerator 。

码：

async function getData() {
    let data = await ajaxCall();
    console.log(data);
}

function ajaxCall() {
    let url = 'https://maps.googleapis.com/maps/api/geocode/json?address=london';

    let xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {
            if(xmlhttp.status == 200) {
                console.log(JSON.parse(xmlhttp.response));
                return JSON.parse(xmlhttp.response);
            } 
        }
    }
    xmlhttp.open('GET', url, true);
    xmlhttp.send();
}

getData();

// It logs "undefined" and then ajax response AFTER

---

.babelrc：

{
    "presets": ["es2015", "stage-0"],
    "plugins": ["transform-runtime"]
}

有人知道什么地方可能出问题吗？

Answer 1

为了使async和await正常工作，您需要从await ed调用中返回一些内容，JS运行时可以使用它来知道何时继续await结果的函数。 async / await互操作所需的“类型”称为Promise 。

您的ajaxCall返回undefined ，它不会告诉JS运行时任何信息，因此它不会await因为没有什么可等待的。 如果您要执行此操作，只需从ajaxCall返回一个Promise并在满足您的ajax请求时解决它。

最简单的：

function ajaxCall() {
  let url = 'https://maps.googleapis.com/maps/api/geocode/json?address=london';
  // The new `window.fetch` API returns a promise for you
  return fetch(url).then(response => response.json());
}

或使用XMLHttpRequest ：

function ajaxCall() {
    let url = 'https://maps.googleapis.com/maps/api/geocode/json?address=london';
    return new Promise((resolve, reject) => {
      let xmlhttp = new XMLHttpRequest();
      xmlhttp.onreadystatechange = () => {
        if (xmlhttp.readyState == XMLHttpRequest.DONE) {
          if (xmlhttp.status == 200) {
            // resolve instead of return inside of a Promise closure
            resolve(JSON.parse(xmlhttp.response));
          } else {
            // reject instead of throw
            // (will throw the error at the `await` expression.)
            reject(Error(`Received status code ${xmlhttp.status}`));
          }
        }
    }
    xmlhttp.open('GET', url, true);
    xmlhttp.send();
  });
}

Answer 2

您需要从ajaxCall（）返回一个Promise。 代码应如下所示：

function ajaxCall() {
  return new Promise((resolve, reject) => {
    let url = 'https://maps.googleapis.com/maps/api/geocode/json?address=london';

    let xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == XMLHttpRequest.DONE) {
        if(xmlhttp.status == 200) {
          console.log(JSON.parse(xmlhttp.response));
          resolve(JSON.parse(xmlhttp.response));
        }
      }
    // handle error: reject(error);
    }
    xmlhttp.open('GET', url, true);
    xmlhttp.send();
  })
}

然后：

async function getData() {
    try {
        let data = await ajaxCall();
        console.log(data);
    } catch (e) {
        // do something with error
    }
}

请注意，我使用了es6箭头功能