Ionic Angular中条码扫描成功后async/await调用HttpClient GET无响应问题

• 你的getOrderFromShopify方法没有返回Promise对象，await调用时不会等待HTTP请求执行，逻辑直接向下走，且你未在请求中添加错误捕获回调，就算请求失败你也无法感知
• Ionic原生插件的回调默认运行在Angular的NgZone执行上下文之外，直接在回调中调用HttpClient发起请求，可能出现请求未被Angular捕获、没有触发订阅逻辑的问题
• 条码内容如果包含特殊字符（空格、&、=等）未做转义，会导致请求URL非法，直接请求失败

1. 调整依赖注入 #

首先在组件头部导入对应依赖，在构造函数中注入：

import { NgZone } from '@angular/core';
// RxJS 7+ 需额外导入lastValueFrom
import { lastValueFrom } from 'rxjs';

// 构造函数注入
constructor(
  private http: HttpClient,
  private ngZone: NgZone,
  private barcodeScanner: BarcodeScanner
) {}

2. 改造HTTP请求方法 #

让请求方法返回Promise，支持await调用，后续可在调用处统一处理返回值和错误：

// RxJS 6及以下版本使用toPromise
getOrderFromShopify(requestUrl: string): Promise<any> {
  return this.http.get(requestUrl).toPromise();
}

// RxJS 7及以上版本使用lastValueFrom
// getOrderFromShopify(requestUrl: string): Promise<any> {
//   return lastValueFrom(this.http.get(requestUrl));
// }

3. 改造扫码逻辑 #

将HTTP请求逻辑放到NgZone.run中执行，保证在Angular上下文内运行，同时对条码内容做URL编码：

async scanCode() {
  try {
    const barcodeData = await this.barcodeScanner.scan();
    const baseURL = 'https://xxxxxxx.xxx?';
    // 对条码内容做URL编码，避免特殊字符导致URL非法
    const queryOptions = 'order_name=' + encodeURIComponent(barcodeData.text);
    const requestUrl = `${baseURL}${queryOptions}`;

    this.ngZone.run(async () => {
      const data = await this.getOrderFromShopify(requestUrl);
      console.log(data);
      this.order_details = data["order"];
      this.line_items = data["order"]["line_items"];
      this.scannedData = barcodeData;
    })
  } catch (err) {
    console.log("Error", err);
  }
}

• 确认AppModule中已正确导入HttpClientModule，无自定义HTTP拦截器主动拦截该请求
• 真机运行时确认已配置对应平台的网络安全规则，安卓端需确认目标域名未被明文HTTP限制拦截
• 打开浏览器开发者工具的网络面板，确认请求是否正常发出，若返回4xx/5xx错误可根据响应内容进一步排查业务侧问题

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