Ionic 6 + Angular 14中Async/Await调用API无数据返回排查求助

核心问题分析 #

• 服务端getCategories方法存在两个关键问题：
  1. 未返回有效数据流：方法内部直接订阅HTTP请求，但没有对外返回Observable或Promise，组件调用时只能拿到undefined（函数默认返回值）。
  2. 异步逻辑处理混乱：用await获取token后，后续HTTP请求的订阅逻辑没有和异步流程结合，也没把数据传递给外部。
• 组件调用方式错误：直接将服务方法的返回值赋值给this.categories，但服务方法并没有返回实际数据。

修复步骤 #

1. 修正服务代码，返回可订阅的数据流 #

推荐用RxJS的方式处理异步逻辑，将token获取转为Observable后串联HTTP请求：

import { from } from 'rxjs';
import { switchMap } from 'rxjs/operators';

// 服务中的方法
getCategories(): Observable<any> {
  return from(Preferences.get({ key: 'TOKEN_KEY' })).pipe(
    switchMap(tokenRes => {
      const headers = new HttpHeaders().set('Authorization', `Bearer ${tokenRes.value}`);
      return this.httpClient.get(`${environment.apiUrl}categories`, { headers });
    })
  );
}

也可以用Promise+Observable的组合（但RxJS方式更符合Angular生态）：

async getCategories(): Promise<Observable<any>> {
  const token = await Preferences.get({ key: 'TOKEN_KEY' });
  const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);
  return this.httpClient.get(`${environment.apiUrl}categories`, { headers });
}

2. 修正组件代码，正确订阅数据 #

组件需要通过订阅服务返回的Observable来获取数据：

// 组件中的方法
ngOnInit() {
  this.getCategories();
}

getCategories() {
  // 对应RxJS版本的服务方法
  this.categoriesService.getCategories().subscribe({
    next: (data) => {
      this.categories = data;
    },
    error: (err) => {
      console.log('获取分类失败:', err);
    }
  });

  // 如果用Promise+Observable版本的服务方法
  // this.categoriesService.getCategories().then(obs => {
  //   obs.subscribe(data => this.categories = data);
  // });
}

3. 额外排查点 #

• 检查environment.apiUrl拼接是否正确：若apiUrl结尾无/，拼接后会出现xxxapi/categories这类错误地址，需确保拼接后是合法的API路径。
• 验证token有效性：在服务中打印token.value，确认格式正确、未过期。
• 查看浏览器网络面板：确认HTTP请求是否发送，以及响应的状态码、返回内容，判断是请求未发出还是后端返回异常。

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