javascript - 使用Async/Await调用Async函数给对象中的key赋值

标签 javascript object asynchronous ecmascript-6 async-await

<分区>

我想知道如何使用 Await/Async 将值异步分配给多个不同的键。

最初我以为只要调用 Async 函数就会分配如下值:

const getMetrics =  async (metric, key) => {
  const rawResponse = await fetch(`http:/localhost:8080/${metric}`, 
 {
    method: 'POST'
    body: JSON.stringify({
    projects:[
      {
        name: key
      }]
  }
)
  });

  return await rawResponse.json();
};

  const metrics =  {
    metric1:  {
      key1: getMetrics("metric1", "key1"),
      key2: getMetrics("metric1", "key2"),
      key3: getMetrics("metric1", "key3")
    },

    metric2: {
      key1: getMetrics("metric2", "key1"),
      key2: getMetrics("metric2", "key2"),
      key3: getMetrics("metric2", "key3")
    }
}

显然这不是 async 的工作方式，因为必须调用 await 才能从已解析的 promise 中实际检索值。但它确实异步检索值并将值分配给键(尽管是 promise 而不是它们的值)，这正是我一直在寻找的东西。

所以问题是我实际上如何异步获取分配给键的值？

  const metrics =  {
    metric1:  {
      key1: await getMetrics("metric1", "key1"),
      key2: await getMetrics("metric1", "key2"),
      key3: await getMetrics("metric1", "key3")
    },

    metric2: {
      key1: await getMetrics("metric2", "key1"),
      key2: await getMetrics("metric2", "key2"),
      key3: await getMetrics("metric2", "key3")
    }
}

我试过了，它确实分配了值，但显然它完全违反直觉，因为它在那个时候是同步顺序的。

通常对于分配给异步函数的标准变量，我只是将函数调用添加到数组并使用

将函数解构为变量

const asyncFunctions = [val1(), val2(), val3()];
const [key1,key2,key3] = await Promise.all(asyncFunctions);

我如何为对象完成类似的事情？

最佳答案

使用与当前方法类似的方法从 Promise.all 解构数组，然后将值重新转换为对象:

const promises = [getMetrics(), getMetrics(), getMetrics(), getMetrics(), getMetrics(), getMetrics()];
const [key1_1,key1_2,key1_3, key2_1, key2_2, key2_3] = await Promise.all(promises);
const metrics = {
  metric1: {
    key1: key1_1,
    key2: key1_2,
    key3: key1_3
  },
  metric1: {
    key1: key2_1,
    key2: key2_2,
    key3: key2_3,
  }
};

关于javascript - 使用Async/Await调用Async函数给对象中的key赋值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54981563/

上一篇：javascript - 以特定格式显示数组

下一篇：javascript - 使用 npm 在 macOS 上安装 webpack

相关文章：

javascript - 卡在构建 'cart management' 系统

java - 创建一个参数是类和通用 ArrayList 的方法

javascript - Electron 的异步问题

javascript - 如何在分页事件中突出显示数据表中的单词

javascript - 错误 - 在处理程序中创建了一个 promise ，但没有从中返回

javascript - 对象中的 ES6 风格简写函数是否有 ESLint 规则？

javascript - 避免大量垃圾收集

javascript - 更改 javascript 内的链接

javascript - 如何迭代JavaScript对象并在指定位置显示结果？

javascript - 根据先前对象数组中的共享属性创建新对象