遍历数组时如何对部分符合条件的元素选择性发起异步请求？

原有代码问题梳理 #

• 属性名拼写错误：data对象中定义的数组键为photo，调用时错写为data.photos
• await使用不符合语法规范：await只能在async修饰的异步函数内使用，你写的map回调函数没有加async声明
• 异步返回值未处理：async函数默认返回Promise对象，直接调用map得到的是Promise数组，需要用Promise.all等待所有异步操作执行完成才能拿到最终结果
• 输出变量名拼写错误：你定义的处理后变量为newData，打印时错写为不存在的newPtotoObj
• 数值判断逻辑有缺陷：isNaN判断会对空字符串、null等非数值类型也返回false，更稳妥的方案是直接用typeof判断元素是否为数字类型

完整可运行代码 #

let data = {
  photo: [33,24, {blob: 'blob'}, 44]
}

// 异步操作需要包裹在async函数内执行
async function handlePhotoArr() {
  // map传入async回调，得到Promise数组
  const promiseList = data.photo.map(async (photo) => {
    if (typeof photo === 'number') {
      return photo
    }
    // 非数值类型发起异步请求，替换为返回的id
    const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
    const resData = await response.json();
    return resData.id
  })
  // 等待所有异步请求执行完成，得到最终数组
  const finalData = await Promise.all(promiseList)
  console.log(finalData)
  // 输出结果：[33, 24, 1, 44]，其中1为示例接口返回的id值
}

// 调用执行函数
handlePhotoArr()

注意事项 #

你只需要将代码中的示例接口地址替换为你实际的blob上传接口，即可得到符合预期的[33,24, value_from_request, 44]格式的结果。

内容的提问来源于stack exchange，提问作者alex vasilev