Pesquisa de site

javascript - Diferença entre os métodos .pipe() e .subscribe() em um observável RXJS

Percebi recentemente que posso retornar um valor dentro de .pipe(), mas não dentro de .subscribe().

Qual é a diferença entre esses dois métodos?

Por exemplo, se eu tiver essa função, vamos chamá-la de 'depositar', que supostamente deve retornar o saldo da conta, se eu fizer isso:

deposit(account, amount){
    return this.http.get('url')
    .subscribe(res => {
        return res;
    }
}

Ele retorna um observável e se eu fizer isso:

deposit(account, amount){
    return this.http.get('url')
    .pipe(
        map(res => {
            return res;
        });
    );
}

Ele retorna o saldo da conta como esperado.

Então por quê?

Resposta #1

O método pipe é para encadear operadores observáveis, e o subscribe é para ativar o observável e ouvir os valores emitidos.

O método pipe foi adicionado para permitir que o webpack descarte operadores não utilizados do bundle final de JavaScript. Isso facilita a criação de arquivos menores.

Por exemplo, se eu tiver essa função, vamos chamá-la de 'depositar', que deveria retornar o saldo da conta, se eu fizer isto:

deposit(account, amount){
    return this.http.get('url')
    .subscribe(res => {
        return res;
    }
}

Ele retorna um observável

Isso não é o que ele retorna. Ele retorna o objeto Subscription criado quando você chamou Subscribe.

e se eu fizer isto:

deposit(account, amount){
    return this.http.get('url')
    .pipe(
        map(res => {
            return res;
        });
    );
}

Ele retorna o saldo da conta como esperado.

Isso não é o que ele retorna. Ele retorna um Observable que usa um operador map. O operador map no seu exemplo não faz nada.

Resposta #2

Exemplos

Uma diferença importante é que, se você não executar subscribe, a requisição nunca será enviada e pipe nunca será executado. Aqui estão exemplos que funcionam e mostram a diferença:

  • Inscrever-se

    const { interval, of } = rxjs;
const { delay, take } = rxjs.operators;

this.http = { get: (url)=> of(url).pipe(delay(1000), take(1)) } // request simulator

deposit = (account, amount) => {
    return this.http.get('url')
      .subscribe(res => {
          console.log('hello from subscriber');
          return res;
      })
}

let subscription = deposit('',''); // immediately send request
// you can cancel request by subscription.unsubscribe()

console.log('subscribed');
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.min.js" integrity="sha256-85uCh8dPb35sH3WK435rtYUKALbcvEQFC65eg+raeuc=" crossorigin="anonymous"></script>

  • Tubo

    const { interval, of,  } = rxjs;
const { delay, take, map } = rxjs.operators;

this.http = { get: (url)=> of(url).pipe(delay(1000), take(1)) } // request simulator

deposit = (account, amount) => {
    return this.http.get('url')
        .pipe(
            map(res => {
                console.log('hello from pipe');
                return res;
            })
        );
}

const observable = deposit('',''); // this will return observable and do nothing


console.log('nothing happen');
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.min.js" integrity="sha256-85uCh8dPb35sH3WK435rtYUKALbcvEQFC65eg+raeuc=" crossorigin="anonymous"></script>

  • Pipe + Assinar

    const { interval, of,  } = rxjs;
const { delay, take, map } = rxjs.operators;

this.http = { get: (url)=> of(url).pipe(delay(1000), take(1)) } // request simulator

deposit = (account, amount) => {
    return this.http.get('url')
      .pipe(
          map(res => {
              console.log('hello from pipe');
              return res;
          })
      );
}

const observable = deposit('',''); // this will return observable and do nothing

const subscription = observable.subscribe(result => { // this will send request 
  console.log('hello from subscriber')
}); 

// subscription.unsubscribe() - this will cancel request
    <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.min.js" integrity="sha256-85uCh8dPb35sH3WK435rtYUKALbcvEQFC65eg+raeuc=" crossorigin="anonymous"></script>

Artigos relacionados