javascript - 异步与标准回调混合

Question

我刚刚开始学习 Javascript 中的 Promise，并且偶然发现了 async/await。

根据我的理解，如果我指定一个函数为异步，javascript将始终包装我的函数的内容并返回一个Promise，而不是我返回的任何内容.

让我们假设以下场景:

async function httpRequest() {
   oReq = new XMLHttpRequest();
   oReq.addEventListener("load", function() {
      return this.responseText;
   });

   oReq.open("GET", "http://some.url.here");
   oReq.send();
}

httpRequest().then(function(httpResult) {
    console.log(httpResult);
}); 

我是否正确地假设上述情况不起作用，因为 httpRequest() 没有返回任何内容，XMLHttpRequest 的回调仅返回一些内容，因此我的结果很可能是未定义？

如果是，我该如何修复 httpRequest() 以便它可以在 async/await 场景中工作？

Answer 1

这里是一个执行异步操作的异步函数，其中该操作不使用 promise 。这意味着您需要设置一个显式管理和返回 promise 的函数。您此处不需要 async 关键字，因为您想要显式返回您创建的 Promise，而不是为您创建的 Promise通过 async 关键字(您无法直接管理)。

function httpRequest() {

   // Return a promise (this is what an async function does for you)
   return new Promise(resolve => {
     const oReq = new XMLHttpRequest();
     oReq.addEventListener("load", function() {

        // Resolve the promise when the async operation is complete.
        resolve(this.responseText);
     });

     oReq.open("GET", "http://some.url.here");
     oReq.send();
   };
}

现在函数显式返回一个 Promise，它可以像 async 函数一样被 await 编辑。或者像任何 Promise 一样与 then() 一起使用。

async function someFunction() {
  // await
  const awaitedResponse = await httpRequest();
  console.log(awaitedResponse);

  // or promise chain
  httpRequest().then(responseText => console.log(responseText));
};