尝试使用 map() 解决 API 的 Promise

Question

更新：已解决！

唯一需要的更改是将 API 调用的 await 设置为 return，然后返回带有图像名称和 ID 的地图。仍在尝试将地图转换为数组，但这篇文章的这个问题已经解决。这是新的打印输出：

1 face detected from image Family1-Son1.jpg with ID 98091e1e-bc8d-4c93-a850-a115684a6e6e
Family1-Son1.jpg
1 face detected from image Family1-Dad3.jpg with ID f94360f5-feb3-4d14-816f-7d854fc0b34c
Family1-Dad3.jpg
[ { '0': 'F',
    '1': 'a',
    '2': 'm',
    '3': 'i',
    '4': 'l',
    '5': 'y',
    '6': '1',
    '7': '-',
    '8': 'D',
    '9': 'a',
    '10': 'd',
    '11': '3',
    '12': '.',
    '13': 'j',
    '14': 'p',
    '15': 'g',
    id: 'f94360f5-feb3-4d14-816f-7d854fc0b34c' },
  { '0': 'F',
    '1': 'a',
    '2': 'm',
    '3': 'i',
    '4': 'l',
    '5': 'y',
    '6': '1',
    '7': '-',
    '8': 'S',
    '9': 'o',
    '10': 'n',
    '11': '1',
    '12': '.',
    '13': 'j',
    '14': 'p',
    '15': 'g',
    id: '98091e1e-bc8d-4c93-a850-a115684a6e6e' } ]
[ <2 empty items> ]
[]

我在这里尝试了许多不同的方法，但无法让它们起作用。这是我来的最近的一个。我正在尝试调用 API，但在数组中的每个项目上。我不能在常规循环中执行此操作，原因有很多。所以有人说使用 array.map() 函数而不是循环。我做到了这一点：

const IMAGE_BASE_URL = 'https://csdx.blob.core.windows.net/resources/Face/Images/'
let sourceImageFileNames = ['Family1-Dad3.jpg', 'Family1-Son1.jpg']

// Detect faces in the source image array, then get their IDs
let sourcefaceMap = await Promise.all(sourceImageFileNames.map(async (imageName) => {
   // Returns a Promise<DetectedFace[]>
    await client.face.detectWithUrl(IMAGE_BASE_URL + imageName)
        .then((faces) => {
            console.log(`${faces.length} face detected from image ${imageName} with ID ${faces[0].faceId}`)
            let id = faces[0].faceId
            return { ...imageName, id } 
        }).catch((err) => {
            console.log(`No face detected in: ${sourceImageFileNames[0]}.`)
            throw err;
        })
}))

let values = Object.values(sourcefaceMap)
console.log(values)

// Create an array to store the source face IDs
var sourceFaceIds = new Array(sourceImageFileNames.length)
console.log(sourceFaceIds)
let ids = sourceFaceIds.filter((id)=> {
    return id != null;
})

console.log(ids)

调试时这些值似乎存在，但是当我尝试返回地图时，它打印为未定义。即使地图确实完成了循环获取每个 id 的工作（如前两个打印语句所示）。 这是我的打印输出：

VERIFY
1 face(s) detected from image Family1-Dad3.jpg with ID f94360f5-feb3-4d14-816f-7d854fc0b34c
1 face(s) detected from image Family1-Son1.jpg with ID 98091e1e-bc8d-4c93-a850-a115684a6e6e
[ undefined, undefined ]
[ <2 empty items> ]
[ <2 empty items> ]

这是一个具有值的 id 的屏幕截图，当我在 return 语句中将鼠标悬停在它上面时：

基本上，我正在尝试使用 URL 图像进行 API 调用，然后 API 会将 ID 与图像中的每个人脸相关联。我需要 API 调用来返回所有这些 ID。在这种情况下，它只有 2 个 ID。我该怎么做呢？在我的代码的最后，我只需要这些 ID 的数组。就这样。谢谢。

Answer 1

你的map 回调没有return 任何东西，它只是等待。使用

const values = await Promise.all(sourceImageFileNames.map(imageName => {
    // now *really* returns a Promise<DetectedFace[]>
    return client.face.detectWithUrl(IMAGE_BASE_URL + imageName)
        .then(faces => {
            console.log(`${faces.length} face detected from image ${imageName} with ID ${faces[0].faceId}`)
            let id = faces[0].faceId
            return { imageName, id } 
        }).catch((err) => {
            console.log(`No face detected in: ${sourceImageFileNames[0]}.`)
            throw err;
        })
}));
console.log(values);

我也很确定您不想将 imageName 字符串传播到对象中，并且不需要在数组上调用 Object.values 来将其值作为数组获取。

Answer 2

我认为您在let id = response.faceId 在线遇到的问题。

id 正在从 response.faceId 获取其值，请检查响应对象中是否存在 faceId 属性。如果它存在，那么代码将按您的预期工作。