如何访问 async await 返回对象中的属性

Question

为什么我无法在async await返回对象中使用'.'访问对象属性？ 我知道我可以像下面这样访问属性。

let val1 = await call(3);
let val2 = await call(4);

但我很感兴趣这是否可以实现

let v = await call(3).val + await call(4).val;

const call = (x) => {

    return new Promise((resolve, reject) => {

        setTimeout(() => {
            resolve({
                val: x
            });
        }, 3000)
    })
}

const dummy = async () => {

    //let val1 = await call(3);
    //let val2 = await call(4);
    //alert(value.val + val2.val);
    let v = await call(3).val + await call(4).val;
    alert(v);
}

dummy()

- noone

---

不一定更短：let v = await Promise.all([call(3), call(4)]).then(res => res.reduce((a, c) => a + c.val, 0)); 这种方式可以避免多行手写代码，而且总共只需要 3 秒钟。 - user5734311

我认为它应该像这样工作：let v = (await call(3)).val + (await call(4)).val; - phip1611

Answer 1

您正在尝试等待Promise的val属性值。

您需要等待Promise，然后从结果中读取val属性：(await call(3)).val

const call = (x) => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({
                val: x
            });
        }, 3000)
    })
}

const dummy = async () => {
    let v = (await call(3)).val + (await call(4)).val;
    alert(v);
}

dummy()

- Quentin

Answer 2

只需将await和要等待的表达式用括号括起来。然后访问属性。

const call = (x) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({
        val: x
      });
    }, 3000)
  })
}

const dummy = async() => {
  let v = (await call(3)).val + (await call(4)).val;
  alert(v);
}

dummy()

请注意，按照这种方式执行操作，您将等待第一次调用3秒钟，然后再等待另外3秒钟进行第二次调用。除非第二次调用与第一次有直接关联，否则建议您执行以下操作：

const call = (x) => {

  return new Promise((resolve, reject) => {

    setTimeout(() => {
      resolve({
        val: x
      });
    }, 3000)
  })
}

const dummy = async() => {
  // Call both in parallel
  let val1 = call(3);
  let val2 = call(4);
  
  // Await for both
  let v = await Promise.all([val1, val2]);
  
  // *then* add
  alert(v[0].val + v[1].val);
}

dummy()

- Joseph

Answer 3

为什么在async await返回对象时不能使用.来访问属性？

因为call返回一个Promise，所以没有val属性。当你使用await等待返回的Promise时，表达式await call(x)最终会解析为{val: x}，然后你就可以使用.val了。

因此，你可以分别await每个调用并将返回的对象保存在它们自己的变量中，或者将你的表达式await call(x)包装在它们自己的括号中，这样你就可以获取已解决值的.val，而不是promise本身。

const call = (x) => {

  return new Promise((resolve, reject) => {

    setTimeout(() => {
      resolve({
        val: x
      });
    }, 3000)
  })
}

const dummy = async() => {
  let v = (await call(3)).val + (await call(4)).val;
  alert(v);
}

dummy()

- Nick Parsons

Answer 4

这是因为调用不会返回直接的结果对象，而是返回一个Promise对象，它将在.then回调中解析值。您可以等待此调用。

const call = (x) => {

    return new Promise((resolve, reject) => {

        setTimeout(() => {
            resolve({
                val: x
            });
        }, 3000)
    })
}

const dummy = async () => {

    //let val1 = await call(3);
    //let val2 = await call(4);
    //alert(value.val + val2.val);
    let v = await call(3).then(result => result.val) + await call(4).then((result)=> result.val);
    alert(v);
}

dummy()

- Manish Khedekar