javascript - 为 promise 中的对象赋值

标签 javascript node.js vue.js foreach nuxt.js

<分区>

我的网站上有一个页面,我从 Firebase Cloud Firestore 中检索了 1 个项目。这个网站是用 Vue.js 和 Nuxt.js 制作的。我通过我和我的 friend 用 Express.js 制作的 API 获得这个项目。页面上有一个图片库,我想使用包 Photoswipe 来滑动图片,但我需要图片尺寸。由于我在将文档保存到 firebase 时无法设置尺寸,因此我试图在 API 中接收项目时获取图像尺寸。我试图通过在循环遍历所有图库图像的 foreach 循环中使用包 probe-image-size 来做到这一点。

我的问题是我似乎无法从 .then() promise 的内部将维度值设置为 data 对象。

我已经尝试从 promise 中返回值,但这似乎对我不起作用。

这是获取特定项目的 API 端点:

router.get('/:id', api(async req => {
  let item, doc = null

  try {
    doc = await collection.doc(req.params.id).get()
  } catch (err) {
    console.error(`Error getting project ${req.params.id}:`, error);
  }

  if (doc && doc.exists) {

    const data = doc.data()


    const probe_promises = data.images.map(image => probe(image.url).then(res => {
      image.width = res.width;
      image.height = res.height;
    }))

    await Promise.all(probe_promises)

    console.log(data.images);

    item = data
  }

  return item
}));

这是抛出 Request failed with status code 500 错误的部分,没有这部分代码工作正常:

const probe_promises = data.images.map(image => probe(image.url).then(res => {
      image.width = res.width;
      image.height = res.height;
    }))

    await Promise.all(probe_promises)

    console.log(data.images);

这是它抛出的确切错误:

 Request failed with status code 500
[0] 
[0]   at createError (node_modules/axios/lib/core/createError.js:16:15)
[0]   at settle (node_modules/axios/lib/core/settle.js:17:12)
[0]   at IncomingMessage.handleStreamEnd (node_modules/axios/lib/adapters/http.js:237:11)
[0]   at IncomingMessage.emit (events.js:208:15)
[0]   at IncomingMessage.EventEmitter.emit (domain.js:471:20)
[0]   at endReadableNT (_stream_readable.js:1161:12)
[0]   at processTicksAndRejections (internal/process/task_queues.js:77:11)

奇怪的是,当我删除 probe 代码并重新加载页面,然后再次添加代码并再次重新加载页面时,它工作正常。

最佳答案

存在一些 Promise 使用错误。不要将 async/awaitthen/catch 混合使用,或者至少仅在您被迫这样做时才这样做。

array.foreach() 不等待 promise,而是在不做任何其他事情的情况下启动它们。一个解决方案是映射所有的 promise ,然后等待它们。

router.get('/:id', api(async req => {
  let item, doc = null

  try {
    doc = await collection.doc(req.params.id).get()
  } catch (err) {
    console.error(`Error getting project ${req.params.id}:`, error);
  }

  if (doc && doc.exists) {

      const data = doc.data()

      probe_promises = data.images.map(image => probe(image.url).then(res => {
        image.width = res.width;
        image.height = res.height;
      }))

      await Promise.all(probe_promises)

      console.log(data.images);
      item = data
  }

  return item
}));

关于javascript - 为 promise 中的对象赋值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58268868/

相关文章:

javascript - 连续删除先到元素

javascript - 带有来自 Typescript 的路径的 Monorepo 不起作用

mysql - 识别 NodeJS mysql 中的主键

javascript - Express JS 中的 POST 函数

vue.js - 为每个路由器 View 设置不同的指令

javascript - 表单中的命名元素如何干扰全局命名空间?

javascript - 为什么 $(document).blur() 和 $(document).focus() 不适用于 Safari 或 Chrome?

javascript - 使用表情符号 react 加入用户语音 channel

vue.js - 在 NuxtJS 中预加载页面

Vue.js 将 items 中的 item 作为 prop : will I be modifying prop? 传递给组件