route - title page angular




Qual é a diferença entre Promessas e Observáveis? (16)

Abaixo estão algumas diferenças importantes nas promessas e Observáveis.

Promessa

  • Emite apenas um único valor
  • Não cancelável
  • Não compartilhável
  • Sempre assíncrono

Observável

  • Emite vários valores
  • Executa apenas quando é chamado ou alguém está se inscrevendo
  • Pode ser cancelável
  • Pode ser compartilhado e assinado esse valor compartilhado por vários assinantes. E todos os assinantes serão executados em um único ponto no tempo.
  • possivelmente assíncrono

Para um melhor entendimento, consulte https://stackblitz.com/edit/observable-vs-promises

Alguém pode explicar a diferença entre Promise e Observable em Angular?

Um exemplo em cada um seria útil para entender os dois casos. Em que cenário podemos usar cada caso?


Promessas e Observáveis ​​nos ajudam a lidar com operações assíncronas. Eles podem chamar determinados retornos de chamada quando essas operações assíncronas são concluídas.

Angular usa Observables, que é do RxJS, em vez de promessas para lidar com HTTP

Below are some important differences in promises & Observables.


Promessa versus similaridade observável primeiro

  1. Ambos usados ​​para manipular código assíncrono.
  2. Por favor, procure um exemplo de promessa. O construtor Promise passa uma função de referência de resolução que será chamada quando for chamada com algum valor após a conclusão de alguma tarefa assíncrona.
ngOnInit() {
  // promise api
  this.service.getData().then(d => {
     this.data = d;
     this.changeDetectorRef.detectChanges();
  });

  // observable api
  this.service.getData().pipe(takeUntil(this.unsubscribe)).subscribe((d) => {
     this.data = d;
     this.changeDetectorRef.detectChanges();
  });
}
  1. Exemplo observável agora. Aqui também passamos uma função para observable, um observador para lidar com a tarefa assíncrona. Ao contrário da determinação na promessa, ele possui o método a seguir e se inscreve no lugar dele.

  2. Então, ambos lidam com tarefas assíncronas. Agora vamos ver a diferença.

var promise_eg = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('foo');
  }, 300);
});

promise_eg.then(function(value) {
  console.log(value);
  // expected output: "foo"
});

console.log(promise_eg);

Promessa vs Diferença observável

Promessa

  1. Ele resolve ou rejeita um único valor e pode manipular uma tarefa assíncrona de valor único por vez.
  2. Uma promessa, uma vez resolvida o valor assíncrono que ela completa, não pode mais ser usada. Ela é usada apenas uma vez e aqui fica aquém.
  3. Não cancelável
  4. Não há suporte ao rxjs para operadores.

Observável

  1. capacidade de emitir vários valores assíncronos.
  2. Usado para manipular o fluxo de eventos ou valores. Considere que você tem uma variedade de inúmeras tarefas ou valores e deseja que toda vez que o valor for inserido, ele seja tratado automaticamente. Sempre que você insere um valor nessa matriz, todos os seus assinantes receberão o valor mais recente automaticamente.
  3. Observáveis ​​são úteis para observar alterações de entrada, intervalo repetido, valores de transmissão para todos os componentes filhos, notificações push de soquete da Web etc.
  4. Pode ser cancelado usando o método de cancelamento de inscrição a qualquer momento.
  5. Mais uma última parte promissora que oferece suporte a operadores rxjs. Você tem muitos operadores de tubulação majoritariamente mapeados, filtrados, switchMap, combineLatest etc. para transformar dados observáveis ​​antes de assinar.


Promessa:

  • Forneça um único valor futuro;
  • Não preguiçoso;
  • Não cancelável;

Observável:

  • Emite vários valores ao longo do tempo;
  • Preguiçoso;
  • Cancelável;
  • Oferece suporte a operadores de mapas, filtros, reduções e similares

Você pode usar promessas em vez de observáveis ​​ao chamar HTTP em Angular, se desejar.


Algo que encontrei que não era aparente desde a primeira leitura do tutorial e da documentação foi a ideia do multicasting.

Certifique-se de que, por padrão, várias assinaturas acionarão várias execuções em um Observável. Várias assinaturas para uma única chamada HTTP Observable acionarão várias chamadas HTTP idênticas, a menos que você .share() (ative o multicast).

Uma promessa obriga você a lidar com uma coisa de cada vez, desembrulhar seus dados, lidar com exceções, ter suporte a idiomas para coisas legais como assíncrono / aguardar e, por outro lado, é bastante barebones.

Um Observable tem muitos sinos e assobios, mas você precisa entender o poder com o qual está trabalhando ou pode ser mal utilizado.


Embora a resposta aceita seja boa em geral, não acho que enfatize que, ao lidar com componentes angulares, você quase sempre deseja usar um observável, porque ele suporta cancelamento. As promessas não podem ser canceladas e serão resolvidas mesmo que seu componente seja destruído. Angular tende a perdoar até que não seja.

Por exemplo, qualquer detecção manual de alterações em um componente destruído causará uma exceção:

import { range } from 'rxjs';
import { map, filter } from 'rxjs/operators';

range(1, 200).pipe(
  filter(x => x % 2 === 1),
  map(x => x + x)
).subscribe(x => console.log(x));

Se o seu componente for destruído antes da promessa ser resolvida, você receberá um attempt to use destroyed view erro quando a promessa for resolvida.

Como alternativa, se você usar observáveis ​​com o padrão takeUntil , assim que seu componente for destruído, a assinatura será cancelada.

Este é um exemplo um pouco artificial, mas a execução de código para um componente destruído provavelmente levará a erros. A menos que você queira fazer isso por algum motivo: p


Observables e Promises estão nos ajudando a trabalhar com as funcionalidades assíncronas em JavaScript / typescript. Eles são muito semelhantes em muitos casos, no entanto, ainda existem algumas diferenças entre eles.


Vejo muitas pessoas usando o argumento de que Observable é "cancelável", mas é bastante trivial tornar a Promise "cancelável"

Rx.Observable.fromEvent(button, "click"),
Rx.Subject()


Acredito que todas as outras respostas devem esclarecer suas dúvidas. No entanto, eu só queria acrescentar que os observáveis ​​são baseados em programação funcional e acho muito úteis as funções que o acompanham, como map, flatmap, reduzir, zip. A consistência que a Web obtém, especialmente quando depende de solicitações de API, é uma melhoria brutal.

Eu recomendo fortemente esta documentação , pois é a documentação oficial do reactiveX e acho que é a mais clara existente.

Se você quiser entrar no observável, sugiro este post em três partes: http://blog.danlew.net/2014/09/15/grokking-rxjava-part-1/

Embora seja destinado ao RxJava, os conceitos são os mesmos e são muito bem explicados. Na documentação do reactiveX, você tem as equivalências para cada função. Você deve procurar pelo RxJS.


Há uma desvantagem do Observables ausente nas respostas. As promessas permitem usar as funções de assíncrona / espera do ES7. Com eles, você pode escrever código assíncrono como se fosse uma chamada de função síncrona, para que você não precise mais de retornos de chamada. A única possibilidade dos Observables fazerem isso é convertê-los em Promessas. Mas quando você as converte em Promessas, você pode ter apenas um valor de retorno novamente:

async function getData(){
    const data = await observable.first().toPromise();
    //do stuff with 'data' (no callback function needed)
}

Leitura adicional: Como posso aguardar em um Rx Observable?


Promessa - Forneça um único valor futuro. Não preguiçoso . Não pode ser cancelado. Ele rejeitará ou resolverá.

Observável - Forneça vários valores futuros. Preguiçoso. Cancelável. Ele fornece outros métodos de mapa ao vivo, filtro, redução.


Promessas e Observáveis ​​tratam apenas da chamada assíncrona.

Aqui estão as diferenças entre eles:

Observável

  1. Emite vários valores ao longo de um período de tempo
  2. Não é chamado até assinarmos o Observable
  3. Pode ser cancelado usando o método unsubscribe ()
  4. Fornece o mapa, paraCada, filtra, reduz, tenta e tenta novamente

Promessa

  1. Emite apenas um único valor de cada vez

  2. Chama os serviços sem .then e .catch

  3. Não pode ser cancelado

  4. Não fornece nenhum operador


Promessa:

Um manipulador de eventos assíncrono - O objeto Promise representa a conclusão (ou falha) eventual de uma operação assíncrona e seu valor resultante.

Sintaxe: nova promessa (executor);

Por exemplo:

function cancellablePromise(body) {
  let resolve, reject;
  const promise = new Promise((res, rej) => {
    resolve = res; reject = rej;
    body(resolve, reject)
  })
  promise.resolve = resolve;
  promise.reject = reject;
  return promise
}

// Example 1: Reject a promise prematurely
const p1 = cancellablePromise((resolve, reject) => {
  setTimeout(() => resolve('10', 100))
})

p1.then(value => alert(value)).catch(err => console.error(err))
p1.reject(new Error('denied')) // expect an error in the console

// Example: Resolve a promise prematurely
const p2 = cancellablePromise((resolve, reject) => {
  setTimeout(() => resolve('blop'), 100)
})

p2.then(value => alert(value)).catch(err => console.error(err))
p2.resolve(200) // expect an alert with 200

Sobre a Promise: Possui um pipeline, portanto, ele retornará valores apenas uma vez quando for chamado. seu manipulador unidirecional chamado uma vez, talvez você não consiga cancelar. sintaxe útil que você pode brincar, quando () e depois ()

Observáveis:

Observáveis ​​são coleções preguiçosas de vários valores ao longo do tempo. é realmente uma ótima abordagem para operações assíncronas. isso pode ser feito com o rxjs que possui suporte para várias plataformas, pode usar com angular / react etc.

seu ato como forro de fluxo. pode ser multi pipeline. portanto, uma vez definido, você pode se inscrever para obter resultados de retorno em muitos lugares.

Sintaxe: import * as Rx from "@reactivex/rxjs"; para init:

const promise = new Promise(resolve => {
  setTimeout(() => {
    resolve("Hello from a Promise!");
  }, 2000);
});

promise.then(value => console.log(value));

etc

subscrever: RxLogger.getInstance();

Por exemplo:

const observable = new Observable(observer => {
  setTimeout(() => {
    observer.next('Hello from a Observable!');
  }, 2000);
});

observable.subscribe(value => console.log(value));

Como ele suporta multi-pipeline, você pode assinar o resultado em um local diferente, tem muitas possibilidades além das promessas.

Uso: tem mais possibilidades como map, filter, pipe, map, concatMap etc


Resposta curta :

Observável é melhor , tem todos os recursos do Promises , além de recursos extras.

Resposta longa:

Promessas:

  • Uso único "Retornar dados uma vez"
  • Sem cancelamento
  • Um ouvinte
  • Nenhum ouvinte suporta um ouvinte

Observável:

  • Retornar dados muitas vezes conforme os dados mudam
  • Suporte cancelado
  • Soquete de suporte
  • Ofereça suporte a muitos ouvintes e notifique-os quando os dados forem alterados
  • Mapa de suporte, filtro, redução

Promessas e Observáveis nos ajudarão a trabalhar com as funcionalidades assíncronas em JavaScript. Eles são muito semelhantes em muitos casos, no entanto, ainda existem algumas diferenças entre os dois, promessas são valores que serão resolvidos de maneira asynchronous como chamadas http . Por outro lado, os observáveis ​​lidam com uma sequência de eventos assíncronos . As principais diferenças entre eles estão listadas abaixo:

promessa:

  • tendo um pipeline
  • geralmente use apenas com retorno de dados assíncrono
  • não é fácil cancelar

observável:

  • são canceláveis
  • são recuperáveis ​​por natureza, como nova tentativa e nova tentativa.
  • transmitir dados em vários pipelines
  • tendo operações tipo array como map, filter etc
  • pode ser criado a partir de outras fontes, como eventos
  • são funções, que poderão ser subscritas posteriormente

Além disso, criei a imagem gráfica para você abaixo para mostrar as diferenças visualmente:


Promessas

  1. Definição: Ajuda a executar funções de forma assíncrona e a usar seus valores de retorno (ou exceções), mas apenas uma vez quando executadas.
  2. Não preguiçoso
  3. Não cancelável (existem bibliotecas Promise disponíveis no mercado que oferecem suporte ao cancelamento, mas o ES6 Promise não oferece até o momento). As duas decisões possíveis são
    • Rejeitar
    • Resolver
  4. Não é possível tentar novamente (as promessas devem ter acesso à função original que retornou a promessa de ter um recurso de repetição, o que é uma prática ruim)

Observáveis

  1. Definição: Ajuda a executar funções de forma assíncrona e a usar seus valores de retorno em uma sequência contínua ( várias vezes ) quando executadas.
  2. Por padrão, é Preguiçoso, pois emite valores quando o tempo avança.
  3. Tem muitos operadores que simplificam o esforço de codificação.
  4. Uma nova tentativa do operador pode ser usada para repetir sempre que necessário, também se precisarmos repetir o observável com base em algumas condições de repetiçãoQuando pode ser usado.

    Nota : Uma lista de operadores, juntamente com seus diagramas interativos, está disponível aqui em RxMarbles.com





angular-observable