无法将异步函数的结果保存到对象

Question

如果我知道如何解决它，我在家里。 我现在的问题是保存异步函数的结果。 如果我在该函数之后执行console.log，那么我将收到翻译后的值，但片刻之后，当我检查我的动词在打包成对象后的样子时，我将收到未翻译的值。有人知道为什么吗？

private translate(file: any) {

    const keys  = Object.keys(file)
    const values = Object.values(file) // [!] - English Value at start, it's ok

    values.forEach( async (value, index) => {
      if( typeof(value) === 'object') {
        value = this.translate(value)           
      } else {
        const translateResult = await this.GetTranslatedByResstring(keys[index], 1045).toPromise()
        value = translateResult.getPhrase() 
        console.log(value)  //  [!] <- Polish Value, it's ok
      }
    })

    const zipObj = xs => ys => xs.reduce( (obj, x, i) => ({ ...obj, [x]: ys[i] }), {})
    const obj = zipObj (keys) (values) 
    console.log(obj) //  [!] <- English Value, it's not ok, i need Polish value inside
    return obj
  }

#更新 1

调用翻译的地方：

public async getTranslatedJson(
    sourceFile: File,
    originLanguage: Language,
    destinatonLanguage: Language
  ): Promise<string> {
    const file = await this.getFile(sourceFile)
    const parsedFile = JSON.parse(file)
    const translatedFile = this.translate(parsedFile)
    return null
  }

#更新 2

我的 getFile 函数：

private getFile(
    sourceFile: File
  ): Promise<string> {
    return new Promise((resolve) => {
      const file = sourceFile[0]
      const fileReader = new FileReader();
      fileReader.onloadend = (e) => { 
        const testResult = fileReader.result.toString();
        resolve(testResult);
      }
      fileReader.readAsText(file, "UTF-8");
    });
  }

Answer 1

从我的评论扩展，我认为没有必要在这里将 observable 转换为 Promise。您可以改为返回一个 RxJS forkJoin 函数，该函数并行触发多个可观察对象，并在需要响应的地方订阅它。

除了使用Object.keys、Object.values 和Array#reduce，您还可以使用Object.entries 和Object.fromEntries。

试试下面的

import { of, forkJoin } from 'rxjs';
import { map } from 'rxjs/operators';

private translate(file: any): Observable<any> {                // <-- return `Observable` here
  return forkJoin(                                             // <-- `forkJoin` to trigger sources in parallel
    Object.entries(file).map(([key, value]) => {               // <-- `Object.entries` with `Array#map`
      if (typeof (value) === 'object')
        return of([key, this.translate(value)]);               // <-- use `of` to convert value to observable
      return this.GetTranslatedByResstring(value, 1045).pipe(
        map((res: any) => ([key, res.getPhrase()]))            // <-- map to the required format [key, value]
      );
    })
  ).pipe(
    map((res: any) => Object.fromEntries(res))                 // <-- convert back to object
  );
}

现在由于该函数返回一个 observable，您需要在需要响应的地方订阅它。

例如。

ngOnInit() {
  this.translate(file).subscribe({
    next: (value: any) => {
      // any statements that depend on the response must be here
    },
    error: (error: any) => {
      // handle error
    }
  })
}

更新 1

回到我的第一点，我认为这里没有必要将 observable 转换为 promise。因此，请避免 this.getFile() 函数中的 toPromise() 并从那里返回 observable。现在在getTranslatedJson() 函数中，您可以使用像switchMap 这样的高阶映射运算符从一个可观察对象映射到另一个对象。

public getTranslatedJson(
  sourceFile: File,
  originLanguage: Language,
  destinatonLanguage: Language
): Observable<any> {
  return this.getFile(sourceFile).pipe(
    switchMap((file: any) => 
      this.translate(JSON.parse(file))
    )
  );
}

在这种情况下，您将订阅需要响应的 getTranslatedJson() 函数。

ngOnInit() {
  this.getTranslatedJson(file, origLang, destLang).subscribe({
    next: (value: any) => {
      // any statements that depend on the response must be here
    },
    error: (error: any) => {
      // handle error
    }
  })
}

更新 2

如果由于某种原因 Object.entries 和 Object.fromEntries 不可用，您可以随时恢复为 .values、.keys 和 Array#reduce，就像您最初尝试的那样。

private translate(file: any): Observable<any> {                // <-- return `Observable` here
  return forkJoin(                                             // <-- `forkJoin` to trigger sources in parallel
    Object.values(file).map((value: any) => {                  // <-- `Object.values()` with `Array#map`
      if (typeof (value) === 'object')
        return of(this.translate(value));                      // <-- use `of` to convert value to observable
      return this.GetTranslatedByResstring(value, 1045).pipe(
        map((res: any) => res.getPhrase())                     // <-- map to the result from `getPhrase()`
      );
    })
  ).pipe(
    map((res: any) =>                                          // <-- convert back to object
      Object.keys(file).reduce((acc, curr, i) => 
        ({ ...acc, [curr]: res[i] }), 
        Object.create(null)
      );
    )
  );
}

更新 3

通过调整以前的答案，您可以为琐碎的任务找到大多数解决方案。

// credit: https://stackoverflow.com/a/48802804/6513921

private getFile(
  sourceFile: File
): Observable<any> {
  const file = sourceFile[0];
  const fileReader = new FileReader();

  return Observable.create((observer: Subscriber<any>): void => {
    fileReader.onloadend = ((ev: any): void => {
      observer.next(fileReader.result.toString());
      observer.complete();
    });
    
    fileReader.onerror = (error: any): void => {
      observer.error(error);
    }
  });

  fileReader.readAsText(file, "UTF-8");
}