Array.filter搭配async函数不生效，请求结果异常求助

我一眼就看出问题所在了——你把async函数传给了Array.filter，这是个典型的异步遍历误区。让我给你拆解清楚：

核心问题1：Array.filter不识别async回调 #

Array.filter的设计是同步的：它会直接判断回调函数的返回值是真值还是假值，以此决定是否保留元素。但如果回调是async函数，它返回的永远是一个Promise对象，而JavaScript里所有对象都属于“真值”，所以filter会把数组里的每一个元素都保留下来，完全起不到过滤作用——这就是为什么你最后得到的数组长度还是8。

核心问题2：result对象为空的原因 #

你在filter的async回调里给result赋值，但这些赋值操作是异步执行的。你在Promise.all(promises)之后直接返回result时，大部分赋值逻辑还没完成，自然拿不到数据。

正确的解决方案 #

我们需要把“异步请求+过滤”的逻辑拆分开：先让所有异步请求完成，再根据结果过滤元素，同时收集有效数据。

修改后的代码如下：

static async getInitialProps () {
  let result = {}
  // 第一步：用map遍历，为每个元素封装异步请求逻辑，返回状态标识
  const promiseList = contentList.map(async ({hotList, newList, hotUrl, newUrl}) => {
    try {
      const hotRes = await axios.get(hotUrl)
      const newRes = await axios.get(newUrl)
      // 可以恢复你注释掉的接口返回码判断逻辑
      // if (hotRes.data.code === 200) {
        result[hotList] = hotRes.data.data
      // }
      // if (newRes.data.code === 200) {
        result[newList] = newRes.data.data
      // }
      return { success: true, item: {hotList, newList, hotUrl, newUrl} }
    } catch (e) {
      return { success: false }
    }
  })

  // 第二步：等待所有异步请求全部完成
  const allResults = await Promise.all(promiseList)

  // 第三步：用同步filter筛选出请求成功的元素
  const categoryList = allResults.filter(item => item.success).map(res => res.item)

  console.log('categoryList', categoryList.length)
  return { categoryList, ...result }
}

改动说明 #

1. 把filter换成map：filter不适合异步场景，我们需要先执行所有请求，再做过滤
2. 每个map的async函数返回含success的对象：标记该元素的请求是否成功，同时保留原元素数据
3. 用Promise.all等待所有请求完成：确保所有result的赋值操作都已执行
4. 最后用同步filter筛选：这时候就能正确过滤掉请求失败的元素了

这样就能得到你预期的长度为5的categoryList，同时result也能正确收集到接口返回的数据。

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