Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Atribuir o retorno de uma função async a uma variável

por José Mateus
| 136.8k xp | 20 posts
Desenvolvedor Front-end Jr.

Tem alguma forma de atribuir o retorno de uma função assíncrona em uma propriedade? Por exemplo, estou usando um plugin do Ionic capacitor que retorna os valores do local storage, porém ele só me retorna uma promise:

export class LocalStorage {
...
public async getUserToken(): Promise<string> {
        const content = await Storage.get({ key: 'token' });
        const token: string = content.value;
        return token
 }

Eu preciso atribuir esse valor dentro do header da minha requisição (criei uma função pra isso):

export abstract class BaseService {
...
protected requestHeadersAuth() {
        return {    
            headers: new HttpHeaders({
                'Content-Type': 'application/json',
                'Authorization':  `Bearer ${this.localStorage.getUserToken()}`
            })
        }
}

Eu sei que dessa forma não vai funcionar 'Authorization': Bearer ${this.localStorage.getUserToken()}, pois o retorno seria uma promise, mas teria alguma forma de atribuir o valor do retorno?

Não posso usar async na função requestHeadersAuth()', pois eu chamo ela na minha requisição:

export class TesteService extends BaseService {
...
get(): Observable<any[]>{
        return this._http.get<any[]>(this.UrlService, this.requestHeadersAuth())
...
3 respostas
por Matheus Henrique Castiglioni
| 5307.1k xp | 9007 posts
Instrutor Senior Software Engineer

Fala ai José, tudo bem? Na verdade você pode utilizar async no seu serviço sim, a ideia seria algo assim:

async get(): Observable<any[]> {
        return this._http.get<any[]>(this.UrlService, await this.requestHeadersAuth())
}

Dessa forma agora requestHeadersAuth pode também ser async e fazer o await da busca do token.

Espero ter ajudado.

por José Mateus
| 136.8k xp | 20 posts
Desenvolvedor Front-end Jr.

Opaa Tudo bom?

Obrigado por responder.

Eu tentei essa abordagem porém ele me retorna o seguinte erro:

error TS1064: The return type of an async function or method must be the global Promise type. Did you mean to write 'Promise<Observable<any[]>>'?

Se eu colocar da forma que ele indica, que seria assim: 

async get(): Promise<Observable<any[]>>{
        return this._http.get<any[]>(this.UrlService, this.requestHeadersAuth())

a aplicação não funciona. Você sabe alguma coisa que eu poderia fazer nesses casos?

solução!
por José Mateus
| 136.8k xp | 20 posts
Desenvolvedor Front-end Jr.

Depois de algumas pesquisas, encontrei uma solução para o problema, consiste em converter a promise que retorna da função assíncrona em um observable e a partir disso usar um operador chamado mergeMap para retornar a requisição da chamada como já era feito anteriormente, porém agora no header da requisição eu utilizo o retorno da função assíncrona. O código ficou assim:

get(): Observable<any[]>{
        return from(this.requestHeadersAuth()).pipe(
            mergeMap(header => {
                return this._http.get<any[]>(this.UrlService, header)
...