两行相同代码的区别

Question

谁能给我解释一下这两行代码的区别。在我的原子编辑器中，prettier 将第一个更改为第二个。

(await fetchSearchResults(state.requestConfig, context))?.facilities ?? [] )

和

await fetchSearchResults(state.requestConfig, context)?.facilities ?? [] )

Answer 1

只要您不打算在下面的示例中直接使用承诺结果，就不需要这些括号

(await fetchSearchResults(state.requestConfig, context))?.facilities ?? [] )?.someMethod()

但是这条线已经很长了，所以您最好将承诺结果分配给一个变量。

Answer 2

Prettier 改变了整个事情以遵循 Prettier 配置文件中给出的规则。
在您的 特定情况下 ，(await fetchSearchResults(state.requestConfig, context)) 是无用的，因此 Prettier 将其剥离的原因。

同时，它在中解释的经典异步上下文中可能非常重要。也许可选链接在这里以某种方式欺骗了 Prettier，不确定。

默认的 Vue2 ESlint 配置默认带有 plugin:vue/essential 和 eslint:recommended。
这里是 a link，您可以在其中获得有关原因的更多详细信息。

如果它 仅更漂亮，请检查文档的 options part 或项目（或更高版本）中的 .prettierrc 配置文件。

Answer 3

这两行不相同，这两行之间的任何自动更改很可能 不正确。

为简化起见，区别在于：

(await foo()).bar
await foo() .bar:

由于第二个代码 (await foo().bar) 将：

执行foo()
从中读取属性bar
await那个值

可以写成：

const functionResult = foo();
const result = await functionResult.bar;

虽然第一个代码使用 the grouping operator () to 来：

执行foo()
await那个值
从中读取属性bar

可以写成：

const functionResult = await foo();
const result = functionResult.bar;

如果函数 returns 是一个承诺，这绝对会有所不同：

function foo() {
  return Promise.resolve({ bar: "hello world" });
}

async function main() {
  console.log( await foo() .bar); // undefined - `foo()` returns a promise and there is no `bar` property
  console.log((await foo()).bar); // "hello world" - since the promise resolves to { bar: "hello world" }
}

main();

如果 foo() 是同步的，但 bar 属性是一个承诺，这也会有所不同：

function foo() {
  return { bar: Promise.resolve("hello world") };
}

async function main() {
  console.log( await foo() .bar); // "hello world" since the promise resolves to that string
  console.log((await foo()).bar); // Promise (check the browser console)
}

main();

唯一没有区别的情况是没有异步代码（这意味着 await 可能不应该存在）：

function foo() {
  return { bar: "hello world" };
}

async function main() {
  console.log( await foo() .bar); // "hello world"
  console.log((await foo()).bar); // "hello world" 
}

main();

两行相同代码的区别

Difference betweeen Two line of same code

javascript

async-await