服务接收SDK回调后如何将响应传递给组件并更新视图

问题根源 #

• 当前使用的sdk.publishToChannel是回调风格的API，本身不会返回Promise对象，因此await无法捕获回调内的返回结果，拿到的自然为null
• 回调内的response仅存储在Service的实例变量中，组件无法感知回调执行时机，也无法主动获取到最新结果

修复方案 #

第一步：修改Service.ts代码 #

将回调风格的调用封装为Promise返回，不需要额外声明全局变量存储结果：

publishStream(publishCapabilities, mediaConstraints): Promise<any> {
  this.session = session;
  const videoElement = document.getElementsByTagName('video')[0];
  const publishOptions = {
    publishToken: publishing,
    mediaConstraints: mediaConstraints,
    videoElement: videoElement
  };
  // 封装Promise返回
  return new Promise((resolve, reject) => {
    this.sdk.publishToChannel(publishOptions, (error, response) => {
      if (error) {
        this.logger.log(error);
        return reject(error);
      }
      resolve(response);
    });
  });
}
// 可删除原来的全局callbackResponse变量和单独的publisherCallback方法

第二步：修改Component.ts代码 #

添加错误捕获逻辑，正确获取异步返回结果：

async publishSession() {
  try {
    const publishResponse = await this.myService.publishStream();
    // 此处即可拿到回调返回的response正常使用
    console.log('获取到的发布结果：', publishResponse);
  } catch (error) {
    // 处理调用错误
    console.error('发布失败：', error);
  }
}

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