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