在 Vuejs 中处理具有有序结果的异步 API 调用

Question

在我的项目中，我想实现一个功能，最多调用 n 个 API（其中 n ≤ 4）来获取图像，然后将它们显示在列表中。我使用名为 listImages 的状态来管理它。

它的工作原理如下：

1. 同时调用所有API。
2. 单独处理每个 API 的结果（即一个 API 的错误不应影响其他 API）。
3. 图像加载后，它应该显示在数组中第一个未填充的索引中：

• 图像 1 正在加载（输入 1）-> 图像 1（已加载输入 2）
• 图像 2 正在加载（输入 2）。 -> Image2（加载输入1）
• 图像 3 正在加载（输入 3）。
• 图像 4 正在加载（输入 4）。

我尝试使用 Promise.all 或 Promise.allSettled，但似乎它们不符合我的要求。我想找到一种方法来异步调用 API，但在同一数组中处理结果，从而保持请求的顺序。我怎样才能做到这一点？

非常感谢！

Answer 1

Promise.allSettled

是适合您尝试执行的操作的方法。 最终，您希望在每次履行其中一个承诺时更新您的状态，同时执行所有承诺并等待所有承诺解决。 由于 Promise 是可链接的，因此您可以首先创建“获取”Promise 数组，然后迭代该数组以添加回调，然后调用 Promise 列表上的

allSettled

方法来检索图像。

假设您正在使用 vue SFC

<script setup>

（doc here）代码可能如下所示：

<script setup>
import {ref, onMounted, onBeforeMount } from 'vue'

const listImages = ref(['https://picsum.photos/200/300', 'https://picsum.photos/200/300'])
const imagePromises = ref([])
const loadedImages = ref([])

function fetchImage(url) {
    return fetch(url)
}

onBeforeMount(() => {
    listImages.value.forEach(url => {
        const promise = fetchImage(url)
        promise
            .then(image => {
                console.log('image loaded ', image)
                loadedImages.value.push(image)
            })
            .catch(error => console.error('error while loading image', error))
        imagePromises.value.push(promise)
    })
})

onMounted(async () => {
  const settledImagePromises = await Promise.allSettled(imagePromises.value)
})
</script>

<template>
  <div>
    <pre>listImages: {{listImages.toString()}}</pre>
    <pre>imagePromises: {{imagePromises.toString()}}</pre>
    <pre>loadedImages: {{loadedImages.toString()}}</pre>
  </div>
</template>