Babel async等待着

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运行时可以使用它来知道何时继续{{1}的函数1}结果。 await / async互操作所需的“类型”称为Promise。

你的await返回ajaxCall，它不会告诉JS运行时任何东西，因此它不会undefined，因为没有什么可以等待的。如果您想要完成这项工作，只需从await返回Promise并在满足您的ajax请求时解决此问题。

最简单的：

ajaxCall

或使用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

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箭头功能