JavaScript中的”await” – 它如何知道解析结果

huangapple go评论69阅读模式
英文:

javascript await - how does it know the resolve result

问题

From the tutorial:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

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

async function f1() {
  const x = await resolveAfter2Seconds(10);
  console.log(x); // 10
}

f1();

我可以看到10一直传递到resolve(x),但似乎没有从resolve函数中传递出去。文档说Promise.resolve返回另一个Promise,但我没有看到任何代码处理这个新的Promise。我也没有看到任何代码将x返回到外部范围。文档似乎没有解释这一点,或者我只是不理解。

await关键字是如何知道返回值是10的呢?

英文:

From the tutorial:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await

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

async function f1() {
  const x = await resolveAfter2Seconds(10);
  console.log(x); // 10
}

f1();

I can see 10 going all the way into the resolve(x), but it doesn't seem going out from the resolve function. The document says Promise.resolve returns another Promise, but I don't see any code taking this new Promise. I also don't see any code returning the x to the outer scope. The document doesn't seem explaining this, or I just don't understand.

How does the await keyword know that the return value is 10?

答案1

得分: 1

因为 resolve 将 promise 的解决值设置为您传递给它的值,而 await 会等待直到 promise 被解决(或拒绝),然后返回解决的值(如果 promise 被拒绝则抛出异常)。

Promise.resolve 是一个不同的东西 - 它返回一个已经解决的 promise。

由于您将自己设计的新函数传递给 new Promise,您可以将其命名为 resolve,例如 ok,如果这可以使事情更清晰:new Promise((ok) => ok(8))(但请不要这样做,惯例是使用 resolve)。

您实际上不需要知道 JavaScript 引擎内部发生了什么来使 promise 工作。

英文:

Because resolve sets the promise's resolved value to what you pass to it, and await awaits until a promise is resolved (or rejected) and returns the resolved value (or throws, if the promise was rejected).

Promise.resolve is a different beast – it returns a promise that's already resolved.

Since you're passing a new function of your own devising to new Promise, you could name that resolve e.g. ok, if it makes things clearer: new Promise((ok) => ok(8)) (but please don't; the convention is resolve).

You don't really need to know what exactly happens internally in your JavaScript engine for promises to work.

答案2

得分: 1

以下是翻译好的部分:

  1. "The document says Promise.resolve"(文档中提到了Promise.resolve)
  2. "Do not confuse the static resolve method of the Promise class with the function passed as the first argument to the function passed to the new Promise constructor."(不要将Promise类的静态resolve方法与传递给new Promise构造函数的第一个参数的函数混淆。)
  3. "I also don't see any code returning the x to the outer scope"(我也没有看到任何将x返回到外部作用域的代码)
  4. "Because x isn't returned."(因为x没有被返回。)
  5. "You can't return from an asynchronous operation. That is why promises exist in the first place."(你无法从异步操作中返回。这就是为什么首次引入了Promise的原因。)
  6. "resolveAfter2Seconds returns a promise."(resolveAfter2Seconds返回一个Promise。)
  7. "That promise is resolved with the value of x."(该Promise使用x的值解析。)
  8. "await sends f1 to sleep until the promise on its RHS resolves."(await使f1进入休眠状态,直到右侧的Promise解析完成。)
  9. "When it does, it becomes the resolved value which is assigned to the other x."(一旦解析完成,它就成为了解析值,被分配给另一个x。)
英文:

> The document says Promise.resolve

Do not confuse the static resolve method of the Promise class with the function passed as the first argument to the function passed to the new Promise constructor.


> I also don't see any code returning the x to the outer scope

Because x isn't returned.

You can't return from an asynchronous operation. That is why promises exist in the first place.


resolveAfter2Seconds returns a promise.

That promise is resolved with the value of x.

await sends f1 to sleep until the promise on its RHS resolves.

When it does, it becomes the resolved value which is assigned to the other x.

huangapple
  • 本文由 发表于 2023年4月17日 21:04:37
  • 转载请务必保留本文链接:https://go.coder-hub.com/76035470.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定