调用API获取响应赋值给变量后访问提示undefined如何解决

1. 最常见原因：异步执行顺序错误 #

RxJS的subscribe回调是异步执行的，你调用getData()后立刻访问this.tmp时，接口请求还未响应，赋值逻辑this.tmp=res还没运行，此时tmp还是初始未赋值状态。

验证方法 #

你可以在赋值后立刻打印tmp确认赋值成功：

tmp:any;
getData(){
      this.api.getFiles().subscribe((res)=>{
        console.log(res);
        this.tmp=res;
        console.log('赋值后tmp值：', this.tmp); // 此处打印肯定有值
      })
   }

解法 #

所有需要用到tmp的逻辑，要么放到subscribe回调里执行，要么通过异步方案控制执行顺序：
比如封装成Promise用async/await调用：

import { firstValueFrom } from 'rxjs';

// 封装请求为Promise
async getData(): Promise<void> {
  const res = await firstValueFrom(this.api.getFiles());
  this.tmp = res;
}

// 调用处用await保证执行顺序
async yourCallerMethod() {
  await this.getData();
  console.log(this.tmp); // 此处就能拿到正确值
}

说明：firstValueFrom是RxJS v7+提供的方法，低版本可以替换为toPromise()。

2. 次常见原因：this指向丢失 #

如果getData方法不是直接通过组件实例调用，而是作为回调函数传递给第三方方法（比如事件监听、定时器、数组迭代方法），会导致方法内部的this不再指向当前组件实例，赋值给this.tmp其实是赋给了其他上下文对象，自然访问不到对应值。

解法 #

两种方案固定this指向：

• 定义方法时用箭头函数：

getData = () => {
  this.api.getFiles().subscribe((res)=>{
    this.tmp=res;
  })
}

• 调用时用bind绑定this：

// 示例：给按钮绑定点击事件时
button.addEventListener('click', this.getData.bind(this))

3. 其他排查方向 #

如果以上两个问题都排除，可检查是否存在变量重名、作用域冲突，或者API请求异常分支没有处理的情况：比如请求走了error回调但没有打印错误，你误以为请求成功实际赋值逻辑根本没执行。

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