JavaScript中Observable内部赋值的数组返回为空，外部赋值正常如何解决？

问题原因 #

你遇到的是典型的异步代码执行顺序问题：

• this.userService.getUserDetails() 返回的是RxJS Observable，发起的是异步请求，subscribe 内的赋值回调要等接口响应后才会执行
• 而你的for循环遍历、console.log(userList)、return userList 都是同步代码，会按顺序先执行完毕，此时接口请求还没返回，userList 还没被赋值，自然是空数组
• 你在控制台看到空数组展开后有值，只是浏览器控制台的特性：打印数组时保存的是内存引用，你手动展开的时候接口已经返回、userList 已经被赋值，不代表代码执行到return时数组有值
• userList2 是同步赋值，所以循环执行完就有完整内容，符合你的预期

修复方案 #

不要在异步回调外直接返回结果，改用RxJS的forkJoin等待所有接口请求完成后再统一返回结果，改造后的代码如下：
首先导入依赖（RxJS 6+ 版本适用）：

import { forkJoin, map } from 'rxjs';

改造函数：

setusersExpiryDate() {
  // 把所有用户详情请求拼成Observable数组
  const requestList = this.usersIdsList.map(userId => {
    return this.userService.getUserDetails(userId).pipe(
      // 每个请求返回后直接转成你需要的对象格式
      map(user => ({
        user: userId,
        expirationDate: user.type === 'INTERNAL' 
          ? this.getInternalExpiryDate() 
          : this.getExternalExpiryDate()
      }))
    )
  })

  // 等待所有请求完成后统一返回结果数组，调用方订阅即可拿到完整值
  return forkJoin(requestList);
}

调用方式示例：

// 调用函数时订阅获取结果
this.setusersExpiryDate().subscribe({
  next: (userList) => {
    console.log(userList); // 此处拿到的就是完整的对象数组
    // 后续业务逻辑写在这里
  },
  error: (err) => console.error(err)
})

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