Question

请查看以下javascript代码。当我在浏览器控制台窗口中运行此代码时，收到以下提到的输出。我是javascript的新手，并承诺过。请帮助我了解如何在浏览器控制台中打印“已解决”的内容？




    function resolveAfter2Seconds() {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve('resolved');
        }, 2000);
      });
    }
     
    async function asyncCall() {
      console.log('calling');
      const result = await resolveAfter2Seconds();
      console.log(result);
    }
    asyncCall();

浏览器控制台中的输出：

通话

已解决

现在我的问题是为什么在控制台中打印了“已解决”？据我所知，当调用resolve（）方法时，then（）方法应该已经执行。

Answer 1

await运算符用于等待Promise结算。它返回Promise的实现值，如果不是Promise，则返回值本身。

在您的代码中，由于resolveAfter2Seconds()函数返回了Promise，因此在以下语句中

const result = await resolveAfter2Seconds();

javascript等待Promise结算，然后将其实现值（即'resolved'）分配给result常量。之后，您将result记录在控制台上，这就是'resolved'被记录在控制台上的原因。

asyncCall函数中每个语句上方的注释将帮助您理解输出。

async function asyncCall() {
  // log 'calling' on the console
  console.log('calling');   

  // wait for the promise to resolve and then
  // assign the fulfillment value to 'result'                   
  const result = await resolveAfter2Seconds(); 

  // log the value with which promise returned
  // by 'resolveAfter2Seconds' function resolved
  console.log(result);                         
}

据我所知，then（）方法应该在resolve（）时执行方法被调用。

我看不到您在代码中调用.then()方法的位置。如果您在任何.then()上注册了任何调用.then()方法的回调，则会调用Promise方法。

代替使用async-await语法，可以如下所示更改代码，以查看2秒钟后调用使用.then()注册的回调。

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

// store the promise returned by 'resolveAfter2Seconds' function
const p = resolveAfter2Seconds();

// register a callback function to be invoked after 2
// seconds with the resolved value
p.then(resolvedValue => {
  console.log('callback invoked');
  console.log('Promise resolved with the value of: ' + resolvedValue);
}).catch(error => console.log(error));

从您的问题很明显，您对代码的输出感到困惑，因为它使用async-await语法而不是promise-chaining。 async-await是使用.then()方法调用的常规promise代码的语法糖。

我建议您访问以下链接以了解async-await语法的工作原理。了解这些内容之后，您就可以理解输出了。

Javascript Promise解决方法在控制台中打印。怎么样？

1 个答案: