Chào mọi người. Sergey Omelnitsky đang liên lạc. Cách đây không lâu, tôi đã tổ chức một buổi phát sóng về lập trình phản ứng, nơi tôi đã nói về tính không đồng bộ trong JavaScript. Hôm nay tôi muốn ghi chú về tài liệu này.
Nhưng trước khi bắt đầu nội dung chính, chúng ta cần ghi chú giới thiệu. Vì vậy, hãy bắt đầu với các định nghĩa: ngăn xếp và hàng đợi là gì?
Cây rơm là một tập hợp có các phần tử được lấy trên cơ sở LIFO nhập sau, xuất trước
Xếp hàng là một tập hợp mà các phần tử của nó được lấy theo nguyên tắc FIFO nhập trước xuất trước
Được rồi, hãy tiếp tục.
JavaScript là ngôn ngữ lập trình đơn luồng. Điều này có nghĩa là chỉ có một luồng thực thi và một ngăn xếp trên đó các hàm được xếp hàng để thực thi. Do đó, JavaScript chỉ có thể thực hiện một thao tác tại một thời điểm, trong khi các thao tác khác sẽ đợi đến lượt chúng trong ngăn xếp cho đến khi chúng được gọi.
Ngăn xếp cuộc gọi là một cấu trúc dữ liệu, nói một cách đơn giản, ghi lại thông tin về vị trí của chúng ta trong chương trình. Nếu chúng ta truyền vào một hàm, chúng ta sẽ đẩy mục nhập của nó lên đầu ngăn xếp. Khi chúng ta trở về từ một hàm, chúng ta lấy phần tử trên cùng ra khỏi ngăn xếp và quay trở lại nơi chúng ta gọi hàm. Đây là tất cả những gì ngăn xếp có thể làm. Và bây giờ là một câu hỏi cực kỳ thú vị. Vậy thì tính không đồng bộ hoạt động như thế nào trong JavasScript?
Trên thực tế, ngoài ngăn xếp, các trình duyệt còn có một hàng đợi đặc biệt để làm việc với cái gọi là WebAPI. Các hàm trong hàng đợi này sẽ chỉ được thực thi theo thứ tự sau khi ngăn xếp đã được xóa hoàn toàn. Chỉ sau đó chúng mới được đẩy từ hàng đợi lên ngăn xếp để thực thi. Nếu hiện tại có ít nhất một phần tử trên ngăn xếp thì chúng không thể được thêm vào ngăn xếp. Chính vì điều này mà việc gọi hàm theo thời gian chờ thường không chính xác về mặt thời gian, vì hàm không thể chuyển từ hàng đợi sang ngăn xếp khi nó đầy.
Hãy xem ví dụ sau và bắt đầu triển khai từng bước. Chúng ta hãy cùng xem điều gì xảy ra trong hệ thống.
console.log('Hi');
setTimeout(function cb1() {
console.log('cb1');
}, 5000);
console.log('Bye');
1) Chưa có gì xảy ra cả. Bảng điều khiển trình duyệt rõ ràng, ngăn xếp cuộc gọi trống.
2) Sau đó, lệnh console.log('Hi') được thêm vào ngăn xếp cuộc gọi.
3) Và nó đã được ứng nghiệm
4) Sau đó, console.log('Hi') sẽ bị xóa khỏi ngăn xếp cuộc gọi.
5) Bây giờ chuyển sang lệnh setTimeout(function cb1() {… }). Nó được thêm vào ngăn xếp cuộc gọi.
6) Lệnh setTimeout(function cb1() {… }) được thực thi. Trình duyệt tạo bộ đếm thời gian là một phần của API Web. Nó sẽ thực hiện đếm ngược.
7) Lệnh setTimeout(function cb1() {... }) đã hoàn thành công việc của nó và bị xóa khỏi ngăn xếp cuộc gọi.
8) Lệnh console.log('Bye') được thêm vào ngăn xếp cuộc gọi.
9) Lệnh console.log('Bye') được thực thi.
10) Lệnh console.log('Bye') bị xóa khỏi ngăn xếp cuộc gọi.
11) Sau ít nhất 5000 ms trôi qua, bộ đếm thời gian kết thúc và đặt lệnh gọi lại cb1 vào hàng đợi gọi lại.
12) Vòng lặp sự kiện lấy hàm cb1 từ hàng đợi gọi lại và đặt nó vào ngăn xếp cuộc gọi.
13) Hàm cb1 được thực thi và thêm console.log('cb1') vào ngăn xếp cuộc gọi.
14) Lệnh console.log('cb1') được thực thi.
15) Lệnh console.log('cb1') bị xóa khỏi ngăn xếp cuộc gọi.
16) Chức năng cb1 bị xóa khỏi ngăn xếp cuộc gọi.
Hãy xem một ví dụ về động lực học:
Chà, chúng ta đã xem xét cách triển khai tính không đồng bộ trong JavaScript. Bây giờ hãy nói ngắn gọn về sự phát triển của mã không đồng bộ.
Sự phát triển của mã không đồng bộ.
a(function (resultsFromA) {
b(resultsFromA, function (resultsFromB) {
c(resultsFromB, function (resultsFromC) {
d(resultsFromC, function (resultsFromD) {
e(resultsFromD, function (resultsFromE) {
f(resultsFromE, function (resultsFromF) {
console.log(resultsFromF);
})
})
})
})
})
});Lập trình không đồng bộ như chúng ta biết trong JavaScript chỉ có thể được triển khai bằng các hàm. Chúng có thể được truyền giống như bất kỳ biến nào khác tới các hàm khác. Đây là cách các cuộc gọi lại được sinh ra. Và nó thật tuyệt, vui vẻ và vui tươi, cho đến khi nó biến thành nỗi buồn, sự u sầu và nỗi buồn. Tại sao? Thật đơn giản:
- Khi độ phức tạp của mã tăng lên, dự án nhanh chóng biến thành các khối được lồng nhau nhiều lần, khó hiểu - "địa ngục gọi lại".
- Xử lý lỗi có thể dễ dàng bị bỏ sót.
- Bạn không thể trả về biểu thức bằng return.
Với sự ra đời của Promise, tình hình đã trở nên tốt hơn một chút.
new Promise(function(resolve, reject) {
setTimeout(() => resolve(1), 2000);
}).then((result) => {
alert(result);
return result + 2;
}).then((result) => {
throw new Error('FAILED HERE');
alert(result);
return result + 2;
}).then((result) => {
alert(result);
return result + 2;
}).catch((e) => {
console.log('error: ', e);
});- Chuỗi hứa hẹn xuất hiện, giúp cải thiện khả năng đọc mã
- Đã xuất hiện phương pháp bắt lỗi riêng
- Đã thêm khả năng thực thi song song bằng Promise.all
- Chúng ta có thể giải quyết vấn đề không đồng bộ lồng nhau bằng cách sử dụng async/await
Nhưng lời hứa có những hạn chế của chúng. Ví dụ: một lời hứa không thể bị hủy bỏ nếu không nhảy múa với tambourine và điều quan trọng nhất là nó hoạt động với một giá trị.
Chà, chúng ta đã tiếp cận suôn sẻ việc lập trình phản ứng. Mệt? Chà, may mắn thay, bạn có thể đi pha trà, suy nghĩ về nó và quay lại đọc thêm. Và tôi sẽ tiếp tục.
lập trình phản ứng là một mô hình lập trình tập trung vào luồng dữ liệu và lan truyền thay đổi. Chúng ta hãy xem xét kỹ hơn luồng dữ liệu là gì.
// Получаем ссылку на элемент
const input = ducument.querySelector('input');
const eventsArray = [];
// Пушим каждое событие в массив eventsArray
input.addEventListener('keyup',
event => eventsArray.push(event)
);Hãy tưởng tượng rằng chúng ta có một trường đầu vào. Chúng tôi đang tạo một mảng và với mỗi lần khóa của sự kiện đầu vào, chúng tôi sẽ lưu trữ sự kiện đó trong mảng của mình. Đồng thời, tôi muốn lưu ý rằng mảng của chúng tôi được sắp xếp theo thời gian, tức là. chỉ số của các sự kiện sau lớn hơn chỉ số của các sự kiện trước đó. Mảng như vậy là mô hình đơn giản hóa của luồng dữ liệu, nhưng nó chưa phải là một luồng. Để mảng này được gọi là luồng một cách an toàn, nó phải có khả năng thông báo bằng cách nào đó cho người đăng ký rằng dữ liệu mới đã đến trong đó. Như vậy chúng ta đi đến định nghĩa về dòng chảy.
Dòng dữ liệu
const { interval } = Rx;
const { take } = RxOperators;
interval(1000).pipe(
take(4)
)
lưu lượng là một mảng dữ liệu được sắp xếp theo thời gian có thể cho biết dữ liệu đã thay đổi. Bây giờ hãy tưởng tượng việc viết mã sẽ thuận tiện như thế nào trong đó một hành động yêu cầu gọi một số sự kiện trong các phần khác nhau của mã. Chúng tôi chỉ cần đăng ký luồng và nó sẽ thông báo cho chúng tôi khi có thay đổi. Và thư viện RxJs có thể làm được điều này.
RxJS là một thư viện để làm việc với các chương trình không đồng bộ và dựa trên sự kiện bằng cách sử dụng các chuỗi có thể quan sát được. Thư viện cung cấp một kiểu cơ bản Có thể quan sát được, một số loại phụ trợ (Người quan sát, Người lập lịch, Chủ thể) và các toán tử để làm việc với các sự kiện như với các bộ sưu tập (bản đồ, lọc, thu nhỏ, mọi và những cái tương tự từ JavaScript Array).
Hãy cùng tìm hiểu các khái niệm cơ bản của thư viện này.
Có thể quan sát, Người quan sát, Nhà sản xuất
Có thể quan sát là loại cơ bản đầu tiên chúng ta sẽ xem xét. Lớp này chứa phần chính của việc triển khai RxJs. Nó được liên kết với một luồng có thể quan sát được, có thể được đăng ký bằng phương thức subscribe.
Observable triển khai một cơ chế trợ giúp để tạo các bản cập nhật, được gọi là Observer. Nguồn giá trị cho Observer được gọi là Nhà sản xuất. Đây có thể là một mảng, iterator, web socket, một số loại sự kiện, v.v. Vì vậy có thể nói rằng observable là vật dẫn giữa Nhà sản xuất và Người quan sát.
Có thể quan sát xử lý ba loại sự kiện của Người quan sát:
- tiếp theo – dữ liệu mới
- error – lỗi nếu chuỗi kết thúc do một ngoại lệ. sự kiện này cũng ngụ ý sự hoàn thành của chuỗi.
- hoàn thành - tín hiệu về sự hoàn thành của chuỗi. Điều này có nghĩa là sẽ không có thêm dữ liệu mới.
Hãy xem bản demo:
Lúc đầu chúng ta sẽ xử lý các giá trị 1, 2, 3 và sau 1 giây. chúng ta sẽ nhận được 4 và kết thúc luồng của mình.
Nghĩ tới điều to lớn
Và rồi tôi nhận ra rằng kể lại nó thú vị hơn là viết về nó. 😀
Đăng ký
Khi chúng tôi đăng ký một luồng, chúng tôi sẽ tạo một lớp mới đăng kýcho phép chúng tôi hủy đăng ký bằng phương pháp hủy đăng ký. Chúng ta cũng có thể nhóm các đăng ký bằng phương pháp thêm vào. Chà, thật hợp lý khi chúng ta có thể tách nhóm các chủ đề bằng cách sử dụng tẩy. Các phương thức thêm và xóa chấp nhận đăng ký khác làm đầu vào. Tôi muốn lưu ý rằng khi chúng tôi hủy đăng ký, chúng tôi sẽ hủy đăng ký tất cả các đăng ký con như thể họ đã gọi phương thức hủy đăng ký. Hãy tiếp tục.
Các loại luồng
NÓNG BỨC
LẠNH
Nhà sản xuất được tạo ra bên ngoài có thể quan sát được
Nhà sản xuất được tạo bên trong có thể quan sát được
Dữ liệu được truyền vào thời điểm có thể quan sát được
Dữ liệu được cung cấp tại thời điểm đăng ký
Cần logic bổ sung để hủy đăng ký
Chủ đề tự kết thúc
Sử dụng mối quan hệ một-nhiều
Sử dụng mối quan hệ một-một
Tất cả các đăng ký đều có cùng ý nghĩa
Đăng ký là độc lập
Dữ liệu có thể bị mất nếu bạn không đăng ký
Phát hành lại tất cả các giá trị luồng cho đăng ký mới
Để đưa ra một sự tương tự, tôi sẽ coi một luồng nóng như một bộ phim trong rạp. Bạn đến vào thời điểm nào, từ lúc đó bạn bắt đầu xem. Tôi sẽ so sánh một luồng lạnh với một cuộc gọi trong lĩnh vực công nghệ. ủng hộ. Bất kỳ người gọi nào cũng nghe bản ghi thư thoại từ đầu đến cuối nhưng bạn có thể gác máy bằng cách hủy đăng ký.
Tôi muốn lưu ý rằng cũng có cái gọi là dòng chảy ấm (tôi cực kỳ hiếm khi gặp định nghĩa này và chỉ ở các cộng đồng nước ngoài) - đây là dòng chuyển đổi từ dòng lạnh sang dòng nóng. Câu hỏi đặt ra - sử dụng ở đâu)) Tôi sẽ đưa ra một ví dụ từ thực tế.
Tôi đang làm việc với Angular. Anh ấy tích cực sử dụng rxjs. Để nhận dữ liệu đến máy chủ, tôi mong đợi một luồng lạnh và sử dụng luồng này trong mẫu bằng asyncPipe. Nếu tôi sử dụng đường ống này nhiều lần, thì khi quay lại định nghĩa về luồng lạnh, mỗi đường ống sẽ yêu cầu dữ liệu từ máy chủ, điều này ít nhất phải nói là kỳ lạ. Và nếu tôi chuyển luồng lạnh thành luồng ấm, thì yêu cầu sẽ xảy ra một lần.
Nhìn chung, việc hiểu loại dòng chảy khá khó khăn đối với người mới bắt đầu, nhưng lại quan trọng.
Các nhà khai thác
return this.http.get(`${environment.apiUrl}/${this.apiUrl}/trade_companies`)
.pipe(
tap(({ data }: TradeCompanyList) => this.companies$$.next(cloneDeep(data))),
map(({ data }: TradeCompanyList) => data)
);Các nhà khai thác cung cấp cho chúng tôi khả năng mở rộng khả năng làm việc với các luồng. Chúng giúp kiểm soát các sự kiện xảy ra trong Observable. Chúng ta sẽ xem xét một số toán tử phổ biến nhất và bạn có thể tìm thấy thêm thông tin chi tiết về các toán tử bằng cách sử dụng các liên kết trong thông tin hữu ích.
Toán tử - của
Hãy bắt đầu với toán tử phụ của. Nó tạo ra một Observable dựa trên một giá trị đơn giản.
Toán tử - bộ lọc
Toán tử lọc, như tên cho thấy, lọc tín hiệu luồng. Nếu toán tử trả về true, nó sẽ bỏ qua thêm.
Người vận hành - lấy
take - Lấy giá trị của số lượng bộ phát, sau đó luồng kết thúc.
Toán tử - debounceTime
debounceTime - loại bỏ các giá trị được phát ra nằm trong khoảng thời gian được chỉ định giữa các đầu ra - sau khi khoảng thời gian trôi qua, sẽ phát ra giá trị cuối cùng.
const { Observable } = Rx;
const { debounceTime, take } = RxOperators;
Observable.create((observer) => {
let i = 1;
observer.next(i++);
// Испускаем значение раз в 1000мс
setInterval(() => {
observer.next(i++)
}, 1000);
// Испускаем значение раз в 1500мс
setInterval(() => {
observer.next(i++)
}, 1500);
}).pipe(
debounceTime(700), // Ожидаем 700мс значения прежде чем обработать
take(3)
);
Toán tử - takewhile
Phát ra các giá trị cho đến khi takewhile trả về false, sau đó nó hủy đăng ký khỏi chuỗi.
const { Observable } = Rx;
const { debounceTime, takeWhile } = RxOperators;
Observable.create((observer) => {
let i = 1;
observer.next(i++);
// Испускаем значение раз в 1000мс
setInterval(() => {
observer.next(i++)
}, 1000);
}).pipe(
takeWhile( producer => producer < 5 )
);
Toán tử - CombineLatest
Toán tử CombineLatest có phần giống với Promise.all. Nó kết hợp nhiều chủ đề thành một. Sau khi mỗi luồng thực hiện ít nhất một lần phát xạ, chúng ta sẽ nhận được các giá trị mới nhất từ mỗi luồng ở dạng một mảng. Hơn nữa, sau khi phát ra bất kỳ luồng nào được hợp nhất, nó sẽ đưa ra các giá trị mới.
const { combineLatest, Observable } = Rx;
const { take } = RxOperators;
const observer_1 = Observable.create((observer) => {
let i = 1;
// Испускаем значение раз в 1000мс
setInterval(() => {
observer.next('a: ' + i++);
}, 1000);
});
const observer_2 = Observable.create((observer) => {
let i = 1;
// Испускаем значение раз в 750мс
setInterval(() => {
observer.next('b: ' + i++);
}, 750);
});
combineLatest(observer_1, observer_2).pipe(take(5));
Toán tử - zip
Zip - Chờ một giá trị từ mỗi luồng và tạo thành một mảng dựa trên các giá trị này. Nếu giá trị không đến từ bất kỳ luồng nào thì nhóm sẽ không được hình thành.
const { zip, Observable } = Rx;
const { take } = RxOperators;
const observer_1 = Observable.create((observer) => {
let i = 1;
// Испускаем значение раз в 1000мс
setInterval(() => {
observer.next('a: ' + i++);
}, 1000);
});
const observer_2 = Observable.create((observer) => {
let i = 1;
// Испускаем значение раз в 750
setInterval(() => {
observer.next('b: ' + i++);
}, 750);
});
const observer_3 = Observable.create((observer) => {
let i = 1;
// Испускаем значение раз в 500
setInterval(() => {
observer.next('c: ' + i++);
}, 500);
});
zip(observer_1, observer_2, observer_3).pipe(take(5));
Toán tử - forkJoin
forkJoin cũng tham gia các luồng, nhưng nó chỉ phát ra một giá trị khi tất cả các luồng đã hoàn tất.
const { forkJoin, Observable } = Rx;
const { take } = RxOperators;
const observer_1 = Observable.create((observer) => {
let i = 1;
// Испускаем значение раз в 1000мс
setInterval(() => {
observer.next('a: ' + i++);
}, 1000);
}).pipe(take(3));
const observer_2 = Observable.create((observer) => {
let i = 1;
// Испускаем значение раз в 750
setInterval(() => {
observer.next('b: ' + i++);
}, 750);
}).pipe(take(5));
const observer_3 = Observable.create((observer) => {
let i = 1;
// Испускаем значение раз в 500
setInterval(() => {
observer.next('c: ' + i++);
}, 500);
}).pipe(take(4));
forkJoin(observer_1, observer_2, observer_3);
Nhà điều hành - bản đồ
Toán tử chuyển đổi bản đồ chuyển đổi giá trị bộ phát thành giá trị mới.
const { Observable } = Rx;
const { take, map } = RxOperators;
Observable.create((observer) => {
let i = 1;
// Испускаем значение раз в 1000мс
setInterval(() => {
observer.next(i++);
}, 1000);
}).pipe(
map(x => x * 10),
take(3)
);
Người vận hành – chia sẻ, nhấn
Toán tử nhấn cho phép bạn thực hiện các tác dụng phụ, nghĩa là bất kỳ hành động nào không ảnh hưởng đến trình tự.
Nhà điều hành tiện ích chia sẻ có thể biến luồng lạnh thành luồng nóng.
Chúng ta đã xong việc với các nhà khai thác. Hãy chuyển sang Chủ đề.
Nghĩ tới điều to lớn
Và sau đó tôi đi uống trà. Tôi mệt mỏi với những ví dụ này rồi 😀
Họ chủ đề
Họ chủ đề là một ví dụ điển hình về dòng chảy nóng. Các lớp này là một loại kết hợp hoạt động đồng thời với tư cách là người quan sát và người quan sát. Vì chủ đề là một chủ đề nóng nên cần phải hủy đăng ký khỏi chủ đề đó. Nếu chúng ta nói về các phương pháp chính, thì đó là:
- tiếp theo – chuyển dữ liệu mới vào luồng
- error – lỗi và chấm dứt thread
- hoàn thành - hoàn thành chủ đề
- đăng ký - đăng ký một luồng
- hủy đăng ký - hủy đăng ký khỏi luồng
- asObservable – biến thành người quan sát
- toPromise – chuyển thành một lời hứa
Có 4 5 loại môn học.
Nghĩ tới điều to lớn
Lúc phát sóng có 4 người nói chuyện nhưng hóa ra lại thêm một người nữa. Như họ nói, hãy sống và học hỏi.
Chủ đề đơn giản new Subject()– loại chủ đề đơn giản nhất. Được tạo không có tham số. Truyền các giá trị chỉ nhận được sau khi đăng ký.
chủ thể hành vi new BehaviorSubject( defaultData<T> ) – theo tôi, loại chủ đề phổ biến nhất. Đầu vào lấy giá trị mặc định. Luôn lưu dữ liệu của số phát hành cuối cùng được truyền khi đăng ký. Lớp này cũng có một phương thức giá trị hữu ích, trả về giá trị hiện tại của luồng.
Phát lại chủ đề new ReplaySubject(bufferSize?: number, windowTime?: number) — Đầu vào có thể tùy ý lấy kích thước của bộ đệm của các giá trị mà nó sẽ lưu trữ trong chính nó làm đối số đầu tiên và đối số thứ hai là thời điểm chúng ta cần thay đổi.
Chủ đề không đồng bộ new AsyncSubject() — không có gì xảy ra khi đăng ký và giá trị sẽ chỉ được trả về khi hoàn tất. Chỉ giá trị cuối cùng của luồng sẽ được trả về.
WebSocketChủ đề new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - Tài liệu không nói gì về anh ấy và đây là lần đầu tiên tôi nhìn thấy anh ấy. Nếu ai biết anh ấy làm gì, xin vui lòng viết và chúng tôi sẽ bổ sung.
Phù. Chà, chúng tôi đã trình bày mọi thứ tôi muốn nói với bạn hôm nay. Tôi hy vọng thông tin này hữu ích. Bạn có thể tự đọc danh sách tài liệu tham khảo trong tab thông tin hữu ích.
thông tin hữu ích
Nguồn: www.habr.com