First, the common asynchronous programming

  • 1. Callback functions
  • 2,promise
  • 3. Event monitoring/publish and subscribe
  • 4, RXJS

Second, the use ofpromiseandrxjsImplement asynchronous programming contrast

  • 1. Write asynchronous programming using Promise

    const promise = new Promise((resolve, reject) = > {
  setTimeout((a)= > {
    resolve('Promise worked.');
  }, 1000);
});

promise.then(data= > {
  console.log(data);
});
Copy the code

  • 2, the use of RXJS asynchronous flow programming writing method

    import { Observable } from 'rxjs';
const stream = new Observable(observer= > {
  setTimeout((a)= > {
    observer.next('RXJS works');
  });
});
stream.subscribe(data= > {
  console.log(data);
});
Copy the code

Second,rxjsYou can unsubscribe, butpromiseBut you can’t

  • 1. Specific implementation code

    import { Observable } from 'rxjs';

const stream = new Observable(observer= > {
  setTimeout((a)= > {
    observer.next('Request successful');
  }, 2000);
});

const disposable = stream.subscribe(data= > {
  console.log(data);
});

setTimeout((a)= > {
  disposable.unsubscribe(); // Unsubscribe
}, 1000);
Copy the code

Three, asynchronous multiple execution

Promise execution is immutable from one state to another, and the result is either resole or reject, but cannot be rolled back

  • 1. Timer in promise [only executed once]

    const promise = new Promise((resolve, reject) = > {
  setInterval((a)= > {
    resolve('Promise worked.');
  }, 1000);
});

promise.then(data= > {
  console.log(data);
});
Copy the code

  • 2. Execute multiple times with RXJS

    import { Observable } from 'rxjs';

const stream = new Observable(observer= > {
  let count: number = 0;
  setInterval((a)= > {
    observer.next(count++);
  }, 1000);
});

const disposable = stream.subscribe(data= > {
  console.log(data);
});
Copy the code

Common operators

  • 1. Method of use

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

const stream =
  new Observable() <
  number >
  (observer= > {
    let count = 0;
    setInterval((a)= > {
      observer.next(count++);
    }, 1000);
  });

stream
  .pipe(
    filter((x: number) = > x % 2= = =0),
    map((x: number) = > x * 2)
  )
  .subscribe(data= > {
    console.log(data);
  });
Copy the code

  • 2. See the official website address for common operators

    • Creation OperatorsAn action symbol to create an asynchronous flow
    • Join Creation OperatorsThe connection to create
    • Transformation OperatorsData transformational
    • Filtering OperatorsFilter the data
    • Join OperatorsThe operator of the connection
    • Multicasting Operators
    • Error Handling Operators
    • Utility Operators
    • Conditional and Boolean Operators
    • Mathematical and Aggregate Operators

  • 3. Filters that limit click-through rates

    import { fromEvent } from 'rxjs';
import { throttleTime } from 'rxjs/operators';

const clicks = fromEvent(document.'click');
// Can't click again within 1000ms
const result = clicks.pipe(throttleTime(1000));
result.subscribe(x= > console.log(x));
Copy the code