Angular HttpClient get请求存数据入数组长度为0的解决方法

数组长度打印为0是异步执行时序问题导致的：
Angular HttpClient 发起的请求是异步非阻塞的，你写在subscribe()里的回调逻辑，必须等到接口收到响应之后才会执行。但你写在subscribe()外的console.log，会在发起请求后立刻执行，此时接口还没返回数据，faceTab还没被推入任何元素，所以长度始终显示为0。
你手动遍历接口返回结果往空数组push的操作也是多余的，this.http.get<FaceSnap[]> 本身就会把响应解析为FaceSnap[]类型的数组，不需要手动逐元素push。

所有依赖接口返回数组的逻辑（打印长度、随机抽取元素），都必须放到subscribe的回调函数内部执行，修正后的showOneFaceSnap方法如下：

showOneFaceSnap(){
  // 直接复用你已经封装好的getAllFaceSnaps方法，不需要重复写http请求
  this.getAllFaceSnaps().subscribe(facesnaps => {
    // 以下逻辑在接口返回数据后才会执行，此时facesnaps已经是完整的接口返回数组
    console.log("数组内容: ", facesnaps, "数组长度: ", facesnaps.length);

    // 随机抽取元素的逻辑直接在这里实现
    const randomIndex = Math.floor(Math.random() * facesnaps.length);
    const targetFaceSnap = facesnaps[randomIndex];
    // 拿到随机结果后，执行后续的FaceSnap展示逻辑即可
  });
}

• 如果多个方法需要用到这份FaceSnap列表，可以把数组声明为服务的类属性，在首次请求时给属性赋值，避免重复发起接口请求
• 不要尝试在subscribe外部读取、操作接口返回的数组，你永远无法保证异步请求在外部逻辑执行时已经返回了结果
• 随机索引生成时要做边界判断，如果接口返回空数组的话可以加一层兜底逻辑，避免取到undefined

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