TypeScript中访问API返回结果数组时出现Undefined问题

API 探路者

2026-6-30

问题分析与解决

问题根源

你的代码核心问题是异步操作的时序错误：

this.httpClient.get() 是异步网络请求，subscribe 回调里的 filmList.push(result) 要等API响应返回后才会执行
但方法直接同步返回了初始化的空数组 filmList，调用方法时拿到的是还未填充数据的空数组
控制台打印数组时，浏览器会保留数组的引用，等后续异步操作填充数据后，控制台会更新显示状态，但此时你已经执行了访问索引的代码，所以拿到的是undefined

修复方案

不要直接返回数组，而是返回Observable，让调用方通过订阅获取异步返回的数据：

修改API方法

如果只需要单条影片数据：

search1FilmOmdb(imdbId: string): Observable<ExtensiveSearchFilmModel> {
    const url: string = `${this.baseOmdbUrl}i=${imdbId}`;
    return this.httpClient.get<ExtensiveSearchFilmModel>(url);
}

如果需要保持返回数组的形式：

search1FilmOmdb(imdbId: string): Observable<ExtensiveSearchFilmModel[]> {
    const url: string = `${this.baseOmdbUrl}i=${imdbId}`;
    return this.httpClient.get<ExtensiveSearchFilmModel>(url).pipe(
        map(result => [result])
    );
}

修改调用代码

在组件中订阅Observable，等数据返回后再处理：

console.log('开始请求API...');
this.apiService.search1FilmOmdb(this.imdbId).subscribe({
    next: (filmData) => {
        // 如果是单条数据，直接使用；如果是数组，再访问索引
        console.log('api返回数据:', filmData);
        console.log('第一条数据:', Array.isArray(filmData) ? filmData.at(0) : filmData);
    },
    error: (err) => console.error('请求失败:', err)
});