如何确保在ngx-translate获取值后再执行函数返回？

你的问题核心在于**subscribe是异步操作**——函数会在订阅回调执行前就走到return语句，所以返回的textToSpeech还是初始的undefined。要让函数在拿到翻译值后再返回结果，你需要利用Observable本身的特性，或者将其转换为Promise来处理异步逻辑。

方案1：返回Observable（推荐） #

既然_translateService.get()返回的是Observable，我们可以直接通过pipe和map操作符处理翻译结果，然后把处理后的Observable返回给调用者，由调用者订阅获取最终值：

test(textePage: string[], params?: Object): Observable<string> {
  return this._translateService.get(textePage).pipe(
    map(res => {
      // 将翻译结果的value值拼接成字符串
      return Object.keys(res).map(e => res[e]).join('');
    })
  );
}

调用方式： #

// 在需要使用翻译文本的地方订阅这个Observable
this.test(['welcome.title', 'welcome.subtitle']).subscribe(textToSpeech => {
  // 这里的textToSpeech就是拼接好的翻译内容
  console.log(textToSpeech);
  // 执行后续逻辑，比如传入语音合成API等
});

方案2：使用async/await结合Promise #

如果你更习惯同步风格的代码，可以把Observable转换为Promise，用async/await来等待翻译结果：

async test(textePage: string[], params?: Object): Promise<string> {
  // 将Observable转为Promise，等待翻译结果返回
  const translationRes = await this._translateService.get(textePage).toPromise();
  // 拼接翻译内容并返回
  return Object.keys(translationRes).map(e => translationRes[e]).join('');
}

调用方式： #

注意调用这个async函数时，要么在另一个async函数里用await，要么用.then()处理：

// 方式1：在async函数中使用await
async someOtherFunction() {
  const textToSpeech = await this.test(['welcome.title', 'welcome.subtitle']);
  console.log(textToSpeech);
}

// 方式2：用.then()处理Promise
this.test(['welcome.title', 'welcome.subtitle']).then(textToSpeech => {
  console.log(textToSpeech);
});

为什么原代码不生效？ #

简单来说，JavaScript的异步操作不会阻塞代码执行：当你调用subscribe时，浏览器会把这个异步任务放进任务队列，继续执行后面的return textToSpeech，这时候textToSpeech还没有被赋值，所以返回的是undefined。只有当翻译请求完成后，订阅回调里的代码才会执行，这时候赋值已经晚了。

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