0

Preciso fazer uma requisição simples que retornará apenas um JSON. Estou tentando fazer isso utilizando a seguinte função:

.ts:

getModel(modelId: number) {
  let modelName: any = "none";
  this.carService.getModel(modelId).subscribe(
    data => modelName = data['name']);
  return modelName;
}

service:

getModel(id: number) {
    return this.http.get<any[]>(`${this.getModelByIdUrl + id}`);
}

Mas ele retorna undefined. Consegue encontrar certinho, mas não atribui a variavel modelName. Como posso fazer isso? Só preciso que a função retorne o que recebeu da requisição.

1
  • Acho que faltou vc passar todo o contexto do que precisa, pq eu não entendi pq vc utiliza o service dentro de uma função. Aonde vc chama a função getModel(modelId: number)?? Pq ao que parece está redundante esta função.
    – LeAndrade
    Commented 12/11/2019 às 23:51

2 Respostas 2

2

O que acontece é que http.get é uma chamada assíncrona, ou seja, não é garantido que ela vai retornar os resultados imediatamente, e o return pode inclusive executar antes do get terminar. http.get retorna um Observable, cujo método subscribe serve para indicar o que fazer quando algo for retornado. Então no seu código:

this.carService.getModel(modelId).subscribe(
  data => modelName = data['name']);

return modelName;

A função que está dentro do subscribe (o código data => modelName = data['name'], que usa a sintaxe de arrow function) é um callback: ela não executa imediatamente. Você só está dizendo: quando o http.get retornar algo, execute isso.

Só que a chamada HTTP pode demorar, e o return pode ser executado antes do callback. Ou seja, você pode acabar retornando o modelName antes dele ser setado.


Mas não ficou claro para que você precisa retornar esta informação. Por que não usá-la diretamente dentro do próprio callback? Ex:

this.carService.getModel(modelId).subscribe(
  data => {
    // use o data['name'] diretamente aqui dentro
  }
);

Ou, se precisar somente do name, você pode usar as operações pipe e map, para transformar o retorno em outro Observable:

import { map } from 'rxjs/operators';

getModel(modelId: number): Observable<string> {
  return this.carService.getModel(modelId).pipe(
    map(data => data['name'])
  );
}

Assim, getModel agora retorna um Observable<string>, ou seja, contendo somente o valor de data['name'] (estou assumindo que data['name'] é uma string; caso não seja, mude o tipo de retorno do Observable). O retorno deve continuar sendo um Observable, pois a chamada que origina tudo (http.get) é assíncrona, então se tentarmos retornar diretamente data['name'], caímos no mesmo problema do código original.

Aí você usa getModel onde precisar, lembrando que agora o retorno é o name (e não mais o objeto data):

this.getModel(1).subscribe(name => {
  // usar o name do jeito que quiser
});
2
  • Bom, fiz o que você sugeriu. Mas depois, preciso pegar o valor e utilizar. ai li que é preciso utilizar o subscribe, e cai no mesmo problema de antes. Só para te contextualizar, estou acessando uma api que retorna um json. só que por exemplo, o modelo é um id. e preciso buscar o nome do modelo utilizando o id. depois jogar todos os dados em uma tabela, bonitinho. Mas sempre bato no mesmo problema...
    – bruna
    Commented 13/11/2019 às 12:05
  • 1
    @bruna Como o retorno de http.get é assíncrono, não tem como usá-lo de forma síncrona (não tem como só retornar o valor como você quer fazer). Se precisa usar os dados retornados pelo get, o único jeito garantido é fazer tudo que precisa dentro do subscribe, não tem como fugir disso. Você pode inclusive chamar um subscribe dentro de outro, ou seja, chamar a API, pegar o resultado em um subscribe, e dentro desse subscribe pode fazer outra chamada HTTP para buscar o ID e chamar o respectivo subscribe (dentro do qual vc joga os dados na tabela), etc.
    – hkotsubo
    Commented 13/11/2019 às 12:26
-1

Bom, tome por exemplo que você está fazendo uma requisição esperando um objeto do Tipo Car:

  getModel(id: number): Observable<Car> {
    return this.http.get<Car>(`${this.getModelByIdUrl + id}`);
  }

é necessário que você especifique na chamada http.get que você espera um objeto que seja atribuido ao model Car.
Assim como é necessário sinalizar que a função retorna um Observable do tipo <Car>.

1
  • Então, fazer isso não mudou muita coisa pra mim. até porque a função do service já estava funcionando... eu acho que o problema esta na função do .ts, onde faço a atribuição. Já verifiquei e os dados chegam até lá. O problema é que não persiste na variavel modelName... (mas obrigada)
    – bruna
    Commented 12/11/2019 às 20:57

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .