返回ZoneAwarePromise而不是Angular中的实际值，为什么？

Question

我已经被一个问题困扰了几个小时，我想知道如何解决它。问题是方法一直返回

ZoneAwarePromise

而不是实际正确的字符串。考虑以下注释代码。

retriveRes() {
      /*
        When the callback in the subscription is called, we are calling an async method (httpTranslateToAr).
        However, it returns a ZoneAwarePromise which we don't want to return the promise, we want to return the translation (or the string).
        I am not too comfortable with async functions, so I've been playing around with async and await a lot, but I've never removed the
        ZoneAwarePromise.
      */
        this.userSubjectOutput.subscribe((res) => {
           let manipulatedJSArr = res.map((step: any) => {

            return {
                step: step.step,
                content: this.httpTranslateToAr(step.content), // here is the async method. (as we stated, the return value of content is ZoneAwarePromise)
                exercises: step.exercises
            }
           })
        })
    }
 /*
      I've been playing around with this method, and I am wondering how could I fetch the API response and return a particular value to use it
      in the retriveRes method?
    */
async httpTranslateToAr(str: string) {
       
        this.openAIparams = {
            messages: messages,
            model: "gpt-4",
            max_tokens: 700,
            temperature: 0.3
          }
        await  this.client.post('https://api.openai.com/v1/chat/completions', this.openAIparams).then(
            client=> {
                console.log(client)
                clientValue = client;
          }).catch(err => {
            console.log(err)
          })
          console.log("lol")
          
          console.log(clientValue.data.choices[0].message.content)
          return clientValue.data.choices[0].message.content // this is the value that I want to be returned. Not ZoneAwarePromise
    }

我需要做什么才能让

content

方法中的

map

仅返回翻译为阿拉伯语的字符串而不是 ZoneAwarePromise？也将非常感谢您的解释。 :)

Answer 1

retriveRes() {
  
   this.userSubjectOutput.pipe(switchMap((res) => { // switchMap to wait until the  manipulatedJSArr is built, and only then go to the next step
           let manipulatedJSArr = res.map(async (step: any) => { // make the fn async to be able to return the Array

              return {
                step: step.step,
                content: await this.httpTranslateToAr(step.content), // content will be a value, but the whole {step, content,...} object will be wrapped into a promise because of async function
                exercises: step.exercises
              }
           });
           return Promise.all(manipulatedJSArr); // transform an array of promises to the Promise with the resulting array. this large promise will be unwrapped with switchMap
    })).subscribe(result => console.log('do whatever you want with ', result))
}


async httpTranslateToAr(str: string) {
       
        this.openAIparams = {
            messages: messages,
            model: "gpt-4",
            max_tokens: 700,
            temperature: 0.3
          }
          // here "await" allows to unwrap promise and get a value
          const clientValue = await this.client.post('https://api.openai.com/v1/chat/completions', this.openAIparams).catch(err => {
            console.log(err)
          })
          console.log("lol")
          
          console.log(clientValue.data.choices[0].message.content)
          return clientValue.data.choices[0].message.content // function is async - any value is wrapped into a promise and you can't escape it
    }