Rx(Js) for dummies

 

 

Юрий Дадычин

FE DM, Levi9

Во время подготовки я использовал:

И вам рекомендую, серьезно

Но все как-то сложно, почему-бы не примеры?

Асинхронный быт

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <script 
        src="https://code.jquery.com/jquery-3.1.0.js"
        ></script>
      <script 
        src="https://unpkg.com/@reactivex/rxjs@5.0.3/dist/global/Rx.js"
        ></script>
  </head>
  <body>
  </body>
</html>

// fromPromise
$(() => {
  Rx.Observable.fromPromise(
    $.get('https://jsonplaceholder.typicode.com/users?q=1')
  )
  .subscribe((data) => {
    console.log('End data: ', data);
  });
});

// empty 
$(() => {
  Rx.Observable.empty()
  .concat(
    Rx.Observable.fromPromise(
      $.get('https://jsonplaceholder.typicode.com/users?q=1'))
  )
  .subscribe((data) => {
    console.log('End data: ', data);
  });
});

// concat and reduce
$(() => {
  Rx.Observable.empty()
  .concat(
    Rx.Observable.fromPromise(
      $.get('https://jsonplaceholder.typicode.com/users?q=1'))
  )
  .concat(
    Rx.Observable.fromPromise(
      $.get('https://jsonplaceholder.typicode.com/users?q=2'))
  )
  .concat(
    Rx.Observable.fromPromise(
      $.get('https://jsonplaceholder.typicode.com/users?q=3'))
  )
  .reduce((acc, data) => {
    acc.push(data);
    return acc;
  }, [])
  .subscribe((data) => {
    console.log('End data: ', data);
  });
});

// forkJoin
$(() => {
  Rx.Observable
  .forkJoin(
    $.get('https://jsonplaceholder.typicode.com/users?q=1'),
    $.get('https://jsonplaceholder.typicode.com/users?q=2'),
    $.get('https://jsonplaceholder.typicode.com/users?q=3')
  )
  .subscribe((data) => {
    console.log('End data: ', data);
  });
});

// concatMap
$(() => {
  Rx.Observable
  .forkJoin(
    $.get('https://jsonplaceholder.typicode.com/users?q=1'),
    $.get('https://jsonplaceholder.typicode.com/users?q=2'),
    $.get('https://jsonplaceholder.typicode.com/users?q=3')
  )
  .concatMap(data => {
    console.log('Data from parallel: ', data);
    return Rx.Observable.fromPromise(
      $.get('https://jsonplaceholder.typicode.com/posts?q=4'));
  })
  .concatMap(data => {
    console.log('Data from 1st seq: ', data);
    return Rx.Observable.fromPromise(
      $.get('https://jsonplaceholder.typicode.com/users?q=5'));
  })
  .subscribe((data) => {
    console.log('End data: ', data);
  });
});

$(() => {
  const parallel = Rx.Observable.empty()
  .concat(
    Rx.Observable.fromPromise(
      $.get('https://jsonplaceholder.typicode.com/users?q=1'))
  )
  .concat(
    Rx.Observable.fromPromise(
      $.get('https://jsonplaceholder.typicode.com/users?q=2'))
  )
  .concat(
    Rx.Observable.fromPromise(
      $.get('https://jsonplaceholder.typicode.com/users?q=3'))
  );

  parallel.subscribe((data) => {
    console.log('One of parallel: ', data);
  });

  const requced = parallel
  .reduce((acc, data) => {
    acc.push(data);
    return acc;
  }, []);

  requced.subscribe((data) => {
    console.log('Reduced: ', data);
  });

  const sequenced = requced
  .concatMap(data => {
    console.log('Data from parallel: ', data);
    return Rx.Observable.fromPromise(
      $.get('https://jsonplaceholder.typicode.com/posts?q=4'));
  })
  .concatMap(data => {
    console.log('Data from 1st seq: ', data);
    return Rx.Observable.fromPromise(
      $.get('https://jsonplaceholder.typicode.com/users?q=5'));
  });

  sequenced.subscribe((data) => {
    console.log('End data: ', data);
  });
});

// catch
$(() => {
  Rx.Observable
  .forkJoin(
    $.get('https://jsonplaceholder.typicode.com/users?q=1'),
    $.get('https://jsonplaceholder.typicode.com/users?q=2'),
    $.get('https://jsonplaceholder.typicode.com/users?q=3')
  )
  .concatMap(data => {
    console.log('Data from parallel: ', data);
    return Rx.Observable.fromPromise(
      $.get('https://jsonplaceholder.typicode.com/posts?q=4'));
  })
  .concatMap(data => {
    console.log('Data from 1st seq: ', data);
    return Rx.Observable.fromPromise(
      $.get('https://jsonplaceholder.typicode1.com/users?q=5'));
  })
  // .catch(err => {
  //   throw 'error in source. Details: ' + err;
  // })
  .catch(err => {
    console.log('Something went wrong: ', err);
    return Rx.Observable.empty();
  })
  .subscribe((data) => {
    console.log('End data: ', data);
  }, () => {}, () =>{
    console.log('We are done');
  });
});

Синтетика

$(() => {
  const subject1 = createTicker('First, Mr.', 1500);
  const subject2 = createTicker('Second, Mr.', 100);
  const subject3 = createTicker('Thisrd, sir', 500);

  subject1.subscribe((item) => {
    console.log(item);
  });

  subject2.subscribe((item) => {
    console.log(item);
  });

  subject3.subscribe((item) => {
    console.log(item);
  });
});

function createTicker(name = 'no name', interval = 300) {
  const subject = new Rx.Subject();
  let i = 0;
  setInterval(() => {
    subject.next(`${name} : ${i}`);
    i++;
  }, interval);

  return subject;
}

$(() => {
  const subject1 = createTicker('First, Mr.',  1500);
  const subject2 = createTicker('Second, Mr.', 2000);
  const subject3 = createTicker('Thisrd, sir', 2500);

  subject1.subscribe((item) => {
    console.log(item);
  });

  Rx.Observable
  .forkJoin(
    subject1,
    subject2,
    subject3
  )
  .subscribe((data) => {
    console.log('End data: ', data);
  });
});

function createTicker(name = 'no name', interval = 300) {
  const subject = new Rx.Subject();
  let i = 0;
  setInterval(() => {
    subject.next(`${name} : ${i}`);
    i++;
  }, interval);

  return subject;
}

// Hot and Cold
$(() => {
  const subject1 = createTicker('First, Mr.',  1500);

  // COLD
  var observable = Rx.Observable.create(function (observer) {
    observer.next(1);
    observer.next(2);
    observer.next(3);
    observer.complete();
  });

  observable.subscribe((item) => {
    console.log(item);
  });

  subject1.subscribe((item) => {
    console.log(item);
  });
});

function createTicker(name = 'no name', interval = 300) {
  const subject = new Rx.Subject();
  let i = 0;
  setInterval(() => {
    subject.next(`${name} : ${i}`);
    i++;
  }, interval);

  return subject;
}

// The Cold
$(() => {
  var observable = Rx.Observable.create(function (observer) {
    observer.next(1);
    observer.next(2);
    observer.next(3);
    observer.complete();
  });

  observable.subscribe((item) => {
    console.log(item);
  });

  setTimeout(() => {
    observable.subscribe((item) => {
      console.log(item);
    });
  }, 2000);
});

// The Hot
$(() => {
  const subject1 = createTicker('First, Mr.',  500);

  subject1.subscribe((item) => {
    console.log(item);
  });

  setTimeout(() => {
    subject1.subscribe((item) => {
      console.log(item);
    });
  }, 2000);
});

function createTicker(name = 'no name', interval = 300) {
  const subject = new Rx.Subject();
  let i = 0;
  setInterval(() => {
    subject.next(`${name} : ${i}`);
    i++;
  }, interval);

  return subject;
}

// take
$(() => {
  const subject1 = createTicker('First, Mr.',  1500);
  const subject2 = createTicker('Second, Mr.', 2000);
  const subject3 = createTicker('Thisrd, sir', 2500);

  Rx.Observable
  .forkJoin(
    subject1.take(2),
    subject2.take(2),
    subject3.take(2)
  )
  .subscribe((data) => {
    console.log('End data: ', data);
  });
});

function createTicker(name = 'no name', interval = 300) {
  const subject = new Rx.Subject();
  let i = 0;
  setInterval(() => {
    subject.next(`${name} : ${i}`);
    i++;
  }, interval);
  
  return subject;
}

$(() => {
  const subject1 = createTicker('First, Mr.',  1500);
  const subject2 = createTicker('Second, Mr.', 2000);
  const subject3 = createTicker('Thisrd, sir', 2500);

  Rx.Observable.empty()
  .concat(subject1)
  .concat(subject2)
  .concat(subject3)
  .subscribe((data) => {
    console.log('End data: ', data);
  });
});

function createTicker(name = 'no name', interval = 300) {
  const subject = new Rx.Subject();
  let i = 0;
  setInterval(() => {
    subject.next(`${name} : ${i}`);
    i++;
  }, interval);

  return subject;
}

// merge
$(() => {
  const subject1 = createTicker('First, Mr.',  1500);
  const subject2 = createTicker('Second, Mr.', 2000);
  const subject3 = createTicker('Thisrd, sir', 2500);

  Rx.Observable.empty()
  .merge(
    subject1,
    subject2,
    subject3
  )
  .subscribe((data) => {
    console.log('End data: ', data);
  });
});

function createTicker(name = 'no name', interval = 300) {
  const subject = new Rx.Subject();
  let i = 0;
  setInterval(() => {
    subject.next(`${name} : ${i}`);
    i++;
  }, interval);

  return subject;
}

// pairwise
$(() => {
  const subject1 = createTicker('First, Mr.',  1500);
  const subject2 = createTicker('Second, Mr.', 2000);
  const subject3 = createTicker('Thisrd, sir', 2500);

  Rx.Observable.empty()
  .merge(
    subject1,
    subject2,
    subject3
  )
  .pairwise()
  .subscribe((data) => {
    console.log('End data: ', data);
  });
});

function createTicker(name = 'no name', interval = 300) {
  const subject = new Rx.Subject();
  let i = 0;
  setInterval(() => {
    subject.next(`${name} : ${i}`);
    i++;
  }, interval);

  return subject;
}

// scan
$(() => {
  const subject1 = createTicker('First, Mr.',  1500);
  const subject2 = createTicker('Second, Mr.', 2000);
  const subject3 = createTicker('Thisrd, sir', 2500);
  const acc = [];

  Rx.Observable.empty()
  .merge(
    subject1,
    subject2,
    subject3
  )
  .scan((sum, item) => {
    sum.push(item);
    return sum;
  }, acc)
  .subscribe((data) => {
    console.log('End data: ', data);
  });
});

function createTicker(name = 'no name', interval = 300) {
  const subject = new Rx.Subject();
  let i = 0;
  setInterval(() => {
    subject.next(`${name} : ${i}`);
    i++;
  }, interval);

  return subject;
}

// from
$(() => {
  const subject1 = createTicker('First, Mr.',  1500);
  const subject2 = createTicker('Second, Mr.', 2000);
  const subject3 = createTicker('Thisrd, sir', 2500);
  const acc = [];

  Rx.Observable.empty()
  .merge(
    subject1,
    subject2,
    subject3
  )
  .scan((sum, item) => {
    sum.push(item);
    return sum;
  }, acc)
  .concatMap(data => {
    return Rx.Observable.from(data);
  })
  .subscribe((data) => {
    console.log('End data: ', data);
  });
});

function createTicker(name = 'no name', interval = 300) {
  const subject = new Rx.Subject();
  let i = 0;
  setInterval(() => {
    subject.next(`${name} : ${i}`);
    i++;
  }, interval);

  return subject;
}

// zip
$(() => {
  const subject1 = createTicker('First, Mr.',  1500);
  const subject2 = createTicker('Second, Mr.', 2000);
  const subject3 = createTicker('Thisrd, sir', 2500);

  Rx.Observable.zip(
    subject1,
    subject2,
    subject3
  )
  .subscribe((data) => {
    console.log('End data: ', data);
  });
});

function createTicker(name = 'no name', interval = 300) {
  const subject = new Rx.Subject();
  let i = 0;
  setInterval(() => {
    subject.next(`${name} : ${i}`);
    i++;
  }, interval);

  return subject;
}

QnA

deck

By Yuriy Dadichin

Made with Slides.com

deck

  • 710

More from Yuriy Dadichin