สวัสดีทุกคน. Sergey Omelnitsky กำลังติดต่ออยู่ ไม่นานมานี้ ฉันโฮสต์สตรีมเกี่ยวกับการเขียนโปรแกรมเชิงโต้ตอบ ซึ่งฉันได้พูดคุยเกี่ยวกับความไม่ตรงกันใน JavaScript วันนี้ฉันต้องการจดบันทึกเกี่ยวกับเนื้อหานี้
แต่ก่อนที่เราจะเริ่มเนื้อหาหลัก เราจำเป็นต้องเขียนบันทึกเบื้องต้นเสียก่อน เริ่มต้นด้วยคำจำกัดความ: สแต็กและคิวคืออะไร?
ซ้อนกัน คือคอลเลกชันที่มีองค์ประกอบต่างๆ ที่ได้รับมาในรูปแบบ LIFO แบบเข้าหลังออกก่อน
เปิด คือคอลเลกชันที่มีองค์ประกอบต่างๆ จะได้รับตามหลัก FIFO เข้าก่อนออกก่อน
เอาล่ะ มาทำต่อเลย
JavaScript เป็นภาษาโปรแกรมแบบเธรดเดียว ซึ่งหมายความว่ามีเพียงเธรดเดียวของการดำเนินการและหนึ่งสแต็กที่ฟังก์ชันถูกจัดคิวเพื่อดำเนินการ ดังนั้น JavaScript จึงสามารถดำเนินการได้ครั้งละหนึ่งการดำเนินการเท่านั้น ในขณะที่การดำเนินการอื่นๆ จะรอการเปิดใช้งานบนสแต็กจนกว่าจะมีการเรียก
โทรสแต็ค เป็นโครงสร้างข้อมูลที่พูดง่ายๆ ก็คือ บันทึกข้อมูลเกี่ยวกับสถานที่ในโปรแกรมที่เราอยู่ ถ้าเราผ่านเข้าไปในฟังก์ชัน เราจะผลักรายการของมันไปที่ด้านบนของสแต็ก เมื่อเรากลับจากฟังก์ชัน เราจะดึงองค์ประกอบบนสุดออกจากสแต็กและจบลงที่จุดที่เราเรียกใช้ฟังก์ชันนั้น นี่คือทั้งหมดที่สแต็กสามารถทำได้ และตอนนี้เป็นคำถามที่น่าสนใจอย่างยิ่ง อะซิงโครนัสทำงานใน JavasScript ได้อย่างไร
ในความเป็นจริง นอกเหนือจากสแต็กแล้ว เบราว์เซอร์ยังมีคิวพิเศษสำหรับการทำงานกับ WebAPI ที่เรียกว่า ฟังก์ชั่นในคิวนี้จะถูกดำเนินการตามลำดับหลังจากที่เคลียร์สแต็กเรียบร้อยแล้วเท่านั้น หลังจากนี้เท่านั้นที่จะถูกผลักจากคิวไปยังสแต็กเพื่อดำเนินการ หากมีอย่างน้อยหนึ่งองค์ประกอบบนสแต็กในขณะนี้ ก็จะไม่สามารถเพิ่มองค์ประกอบเหล่านั้นลงในสแต็กได้ เป็นเพราะเหตุนี้เองที่การเรียกใช้ฟังก์ชันตามการหมดเวลามักจะไม่ตรงเวลา เนื่องจากฟังก์ชันไม่สามารถรับจากคิวไปยังสแต็กในขณะที่เต็มได้
ลองดูตัวอย่างต่อไปนี้และเริ่มต้นดำเนินการทีละขั้นตอน เรามาดูกันว่าเกิดอะไรขึ้นในระบบ
console.log('Hi');
setTimeout(function cb1() {
console.log('cb1');
}, 5000);
console.log('Bye');
1) ยังไม่มีอะไรเกิดขึ้น คอนโซลของเบราว์เซอร์ชัดเจน Call Stack ว่างเปล่า
2) จากนั้นคำสั่ง console.log('Hi') จะถูกเพิ่มเข้าไปใน call stack
3) และสำเร็จแล้ว
4) จากนั้น console.log('Hi') จะถูกลบออกจาก call stack
5) ตอนนี้ไปยังคำสั่ง setTimeout(function cb1() {… }) มันถูกเพิ่มเข้าไปใน call stack
6) คำสั่ง setTimeout(function cb1() {… }) จะถูกดำเนินการ เบราว์เซอร์สร้างตัวจับเวลาที่เป็นส่วนหนึ่งของ Web API มันจะทำการนับถอยหลัง
7) คำสั่ง setTimeout(function cb1() {... }) ทำงานได้เสร็จสิ้นแล้ว และถูกลบออกจาก call stack
8) คำสั่ง console.log('Bye') ถูกเพิ่มเข้าไปใน call stack
9) คำสั่ง console.log('Bye') ถูกดำเนินการ
10) คำสั่ง console.log('Bye') จะถูกลบออกจาก call stack
11) หลังจากผ่านไปอย่างน้อย 5000 ms ตัวจับเวลาจะสิ้นสุดลงและวางการโทรกลับ cb1 ไว้ในคิวการโทรกลับ
12) event loop รับฟังก์ชัน cb1 จากคิวการเรียกกลับและวางลงบน call stack
13) ฟังก์ชัน cb1 ถูกดำเนินการและเพิ่ม console.log('cb1') ให้กับ call stack
14) คำสั่ง console.log('cb1') ถูกดำเนินการ
15) คำสั่ง console.log('cb1') จะถูกลบออกจาก call stack
16) ฟังก์ชัน cb1 ถูกลบออกจาก call stack
ลองดูตัวอย่างในไดนามิก:
เราได้ดูว่าการใช้งานแบบอะซิงโครนัสใน JavaScript เป็นอย่างไร ตอนนี้เรามาพูดคุยสั้น ๆ เกี่ยวกับวิวัฒนาการของโค้ดอะซิงโครนัส
วิวัฒนาการของโค้ดอะซิงโครนัส
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);
})
})
})
})
})
});การเขียนโปรแกรมแบบอะซิงโครนัสอย่างที่เราทราบใน JavaScript สามารถใช้งานได้โดยฟังก์ชันเท่านั้น พวกมันสามารถส่งผ่านไปยังฟังก์ชันอื่นได้เหมือนกับตัวแปรอื่นๆ นี่คือวิธีที่การโทรกลับเกิดขึ้น และมันเจ๋ง สนุกสนาน และขี้เล่น จนกลายเป็นความโศกเศร้า เศร้า และโศกเศร้า ทำไม มันง่ายมาก:
- เมื่อความซับซ้อนของโค้ดเพิ่มขึ้น โปรเจ็กต์ก็กลายเป็นบล็อกที่คลุมเครือและซ้อนอยู่ซ้ำๆ อย่างรวดเร็ว - "นรกเรียกกลับ"
- การจัดการข้อผิดพลาดอาจพลาดได้ง่าย
- คุณไม่สามารถส่งคืนนิพจน์ด้วยการส่งคืนได้
ด้วยการมาถึงของ Promise สถานการณ์ก็ดีขึ้นเล็กน้อย
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);
});- Promise Chains ปรากฏขึ้น ซึ่งช่วยให้อ่านโค้ดได้ดีขึ้น
- มีวิธีการแยกต่างหากในการตรวจจับข้อผิดพลาด
- เพิ่มความเป็นไปได้ของการดำเนินการแบบขนานโดยใช้ Promise.all
- เราสามารถแก้ปัญหาอะซิงโครนัสแบบซ้อนได้โดยใช้ async/await
แต่คำสัญญาก็มีข้อจำกัด ตัวอย่างเช่น คำสัญญาไม่สามารถยกเลิกได้หากไม่ได้เต้นรำกับแทมโบรีน และสิ่งที่สำคัญที่สุดคือคำสัญญานั้นใช้ได้ผลเพียงค่าเดียว
เราได้เข้าถึงการเขียนโปรแกรมแบบโต้ตอบได้อย่างราบรื่น เหนื่อย? โชคดีไปชงชาได้ คิดแล้วกลับมาอ่านต่อ และฉันจะดำเนินการต่อ
การเขียนโปรแกรมเชิงโต้ตอบ เป็นกระบวนทัศน์การเขียนโปรแกรมที่เน้นไปที่การไหลของข้อมูลและการแพร่กระจายการเปลี่ยนแปลง มาดูกันว่าสตรีมข้อมูลคืออะไร
// Получаем ссылку на элемент
const input = ducument.querySelector('input');
const eventsArray = [];
// Пушим каждое событие в массив eventsArray
input.addEventListener('keyup',
event => eventsArray.push(event)
);สมมติว่าเรามีช่องใส่ข้อมูล เรากำลังสร้างอาร์เรย์และสำหรับทุกคีย์อัปของเหตุการณ์อินพุต เราจะจัดเก็บเหตุการณ์ไว้ในอาร์เรย์ของเรา ในเวลาเดียวกัน ฉันอยากจะทราบว่าอาร์เรย์ของเราเรียงลำดับตามเวลา กล่าวคือ ดัชนีของเหตุการณ์ภายหลังจะมากกว่าดัชนีของเหตุการณ์ก่อนหน้า อาร์เรย์ดังกล่าวเป็นแบบจำลองที่เรียบง่ายของกระแสข้อมูล แต่ยังไม่เป็นกระแส เพื่อให้อาร์เรย์นี้ถูกเรียกว่าสตรีมได้อย่างปลอดภัย จะต้องสามารถแจ้งให้สมาชิกทราบว่ามีข้อมูลใหม่เข้ามาแล้ว ดังนั้นเราจึงมาถึงคำจำกัดความของการไหล
กระแสข้อมูล
const { interval } = Rx;
const { take } = RxOperators;
interval(1000).pipe(
take(4)
)
ไหล คืออาร์เรย์ของข้อมูลที่จัดเรียงตามเวลาที่สามารถระบุได้ว่าข้อมูลมีการเปลี่ยนแปลง ทีนี้ลองนึกดูว่าการเขียนโค้ดจะสะดวกเพียงใดโดยที่การกระทำหนึ่งต้องเรียกใช้หลายเหตุการณ์ในส่วนต่างๆ ของโค้ด เราเพียงสมัครสมาชิกสตรีมและมันจะแจ้งให้เราทราบเมื่อมีการเปลี่ยนแปลงเกิดขึ้น และไลบรารี RxJs ก็สามารถทำได้
RxJS เป็นไลบรารีสำหรับการทำงานกับโปรแกรมแบบอะซิงโครนัสและแบบอิงเหตุการณ์โดยใช้ลำดับที่สังเกตได้ ห้องสมุดจัดให้มีประเภทพื้นฐาน สังเกตได้, ตัวช่วยหลายประเภท (ผู้สังเกตการณ์ ผู้วางกำหนดการ อาสาสมัคร) และตัวดำเนินการสำหรับการทำงานกับกิจกรรมเช่นเดียวกับคอลเลกชัน (แผนที่ กรอง ลด ทุก ๆ และอันที่คล้ายกันจาก JavaScript Array)
มาทำความเข้าใจแนวคิดพื้นฐานของห้องสมุดนี้กันดีกว่า
สังเกตได้, ผู้สังเกตการณ์, ผู้ผลิต
Observable เป็นประเภทพื้นฐานแรกที่เราจะพิจารณา คลาสนี้ประกอบด้วยส่วนหลักของการนำ RxJs ไปใช้ มันเชื่อมโยงกับสตรีมที่สังเกตได้ ซึ่งสามารถสมัครรับข้อมูลได้โดยใช้วิธีการสมัครสมาชิก
Observable ใช้กลไกตัวช่วยในการสร้างการอัปเดตที่เรียกว่า นักสังเกตการณ์. แหล่งที่มาของค่าสำหรับผู้สังเกตการณ์เรียกว่า ผู้ผลิต. นี่อาจเป็นอาร์เรย์ ตัววนซ้ำ เว็บซ็อกเก็ต เหตุการณ์บางประเภท ฯลฯ ดังนั้นเราจึงสามารถพูดได้ว่าสิ่งที่สังเกตได้นั้นเป็นตัวนำระหว่างผู้ผลิตและผู้สังเกตการณ์
Observable จัดการเหตุการณ์ Observer สามประเภท:
- ถัดไป – ข้อมูลใหม่
- error – ข้อผิดพลาดหากลำดับสิ้นสุดลงเนื่องจากมีข้อยกเว้น เหตุการณ์นี้ยังหมายความถึงความสมบูรณ์ของลำดับด้วย
- เสร็จสมบูรณ์ — สัญญาณเกี่ยวกับความสมบูรณ์ของลำดับ ซึ่งหมายความว่าจะไม่มีข้อมูลใหม่อีกต่อไป
มาดูการสาธิต:
ในตอนแรกเราจะประมวลผลค่า 1, 2, 3 และหลังจากผ่านไป 1 วินาที เราจะได้ 4 และจบสตรีมของเรา
คิดออกมาดังๆ
แล้วฉันก็รู้ว่าการเล่ามันน่าสนใจมากกว่าการเขียนถึงมัน 😀
การสมัครสมาชิก
เมื่อเราสมัครรับข้อมูลสตรีม เราจะสร้างคลาสใหม่ การสมัครสมาชิกซึ่งทำให้เราสามารถยกเลิกการสมัครสมาชิกโดยใช้วิธีการได้ ยกเลิกการเป็นสมาชิก. นอกจากนี้เรายังสามารถจัดกลุ่มการสมัครสมาชิกโดยใช้วิธีการได้ เพิ่ม. มีเหตุผลที่เราจะสามารถยกเลิกการจัดกลุ่มเธรดได้โดยใช้ เอาออก. วิธีการเพิ่มและลบยอมรับการสมัครสมาชิกอื่นเป็นอินพุต ฉันอยากจะทราบว่าเมื่อเรายกเลิกการสมัครสมาชิก เราจะยกเลิกการสมัครสมาชิกสำหรับเด็กทั้งหมดราวกับว่าพวกเขาเรียกวิธีการยกเลิกการสมัครสมาชิก ไปข้างหน้า.
ประเภทของลำธาร
ร้อน
เย็น
ผู้ผลิตถูกสร้างขึ้นภายนอกที่สังเกตได้
ผู้ผลิตถูกสร้างขึ้นภายในที่สังเกตได้
ข้อมูลจะถูกถ่ายโอนในเวลาที่สร้างสิ่งที่สังเกตได้
ข้อมูลมีให้ ณ เวลาที่สมัครสมาชิก
ต้องการตรรกะเพิ่มเติมสำหรับการยกเลิกการสมัคร
เธรดสิ้นสุดลงด้วยตัวเอง
ใช้ความสัมพันธ์แบบหนึ่งต่อกลุ่ม
ใช้ความสัมพันธ์แบบหนึ่งต่อหนึ่ง
การสมัครสมาชิกทั้งหมดมีความหมายเหมือนกัน
การสมัครสมาชิกมีความเป็นอิสระ
ข้อมูลอาจสูญหายได้หากคุณไม่ได้สมัครสมาชิก
ออกค่าสตรีมทั้งหมดใหม่สำหรับการสมัครสมาชิกใหม่
หากจะเปรียบเทียบ ฉันจะนึกถึงกระแสที่กำลังมาแรงเหมือนกับภาพยนตร์ในโรงภาพยนตร์ คุณมาถึงจุดใดตั้งแต่วินาทีนั้นคุณเริ่มรับชม ฉันจะเปรียบเทียบกระแสเย็นกับการโทรในเทคโนโลยี สนับสนุน. ผู้โทรจะฟังการบันทึกข้อความเสียงตั้งแต่ต้นจนจบ แต่คุณสามารถวางสายได้โดยใช้การยกเลิกการสมัคร
ฉันต้องการทราบว่ามีสิ่งที่เรียกว่ากระแสน้ำอุ่น (ฉันพบคำจำกัดความนี้น้อยมากและเฉพาะในชุมชนต่างประเทศเท่านั้น) - นี่คือกระแสที่เปลี่ยนจากกระแสเย็นไปเป็นกระแสร้อน คำถามเกิดขึ้น - จะใช้ที่ไหน)) ฉันจะยกตัวอย่างจากการปฏิบัติ
ฉันทำงานกับแองกูลาร์ เขาใช้ rxjs อย่างแข็งขัน หากต้องการรับข้อมูลไปยังเซิร์ฟเวอร์ ฉันคาดว่าจะมี Cold Thread และใช้เธรดนี้ในเทมเพลตโดยใช้ asyncPipe หากฉันใช้ไพพ์นี้หลายครั้ง เมื่อกลับไปสู่คำจำกัดความของสตรีมแบบเย็น แต่ละไพพ์จะขอข้อมูลจากเซิร์ฟเวอร์ ซึ่งก็แปลกที่จะพูดน้อยที่สุด และถ้าฉันแปลงกระแสเย็นให้เป็นกระแสอุ่น คำขอก็จะเกิดขึ้นครั้งเดียว
โดยทั่วไปแล้ว การทำความเข้าใจประเภทของโฟลว์นั้นค่อนข้างยากสำหรับผู้เริ่มต้น แต่มีความสำคัญ
โอเปอร์เตอร์-ผู้ประกอบการ
return this.http.get(`${environment.apiUrl}/${this.apiUrl}/trade_companies`)
.pipe(
tap(({ data }: TradeCompanyList) => this.companies$$.next(cloneDeep(data))),
map(({ data }: TradeCompanyList) => data)
);ผู้ดำเนินการทำให้เรามีความสามารถในการขยายความสามารถในการทำงานกับสตรีม ช่วยควบคุมเหตุการณ์ที่เกิดขึ้นใน Observable เราจะดูรายการยอดนิยมสองสามรายการ และรายละเอียดเพิ่มเติมเกี่ยวกับผู้ให้บริการสามารถดูได้จากลิงก์ในข้อมูลที่เป็นประโยชน์
ผู้ประกอบการ-ของ
เริ่มจากตัวดำเนินการเสริมของ มันสร้าง Observable ตามค่าธรรมดา
ตัวดำเนินการ - ตัวกรอง
ตัวดำเนินการตัวกรอง ดังชื่อที่แนะนำ กรองสัญญาณสตรีม หากตัวดำเนินการส่งคืนค่าจริง ก็จะข้ามไปเพิ่มเติม
ผู้ดำเนินการ - รับ
take — รับค่าของจำนวนตัวปล่อย หลังจากนั้นเธรดจะสิ้นสุด
ตัวดำเนินการ - debounceTime
debounceTime - ละทิ้งค่าที่ปล่อยออกมาซึ่งอยู่ภายในช่วงเวลาที่กำหนดระหว่างเอาต์พุต - หลังจากผ่านไปตามช่วงเวลาแล้ว ให้ปล่อยค่าสุดท้าย
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)
);
ตัวดำเนินการ - TakeWhile
ปล่อยค่าจนกระทั่ง takeWhile ส่งกลับค่า false หลังจากนั้นจะยกเลิกการสมัครจากเธรด
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 )
);
ตัวดำเนินการ - รวมล่าสุด
ตัวดำเนินการ CombineLatest ค่อนข้างคล้ายกับ Promise.all มันรวมหลายเธรดเป็นหนึ่งเดียว หลังจากที่แต่ละเธรดปล่อยอย่างน้อยหนึ่งครั้ง เราจะรับค่าล่าสุดจากแต่ละเธรดในรูปแบบของอาร์เรย์ นอกจากนี้ หลังจากการปล่อยก๊าซจากลำธารที่รวมกันแล้ว ก็จะให้ค่าใหม่
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));
ตัวดำเนินการ - zip
Zip - รอค่าจากแต่ละเธรดและสร้างอาร์เรย์ตามค่าเหล่านี้ หากค่าไม่ได้มาจากเธรดใดๆ กลุ่มจะไม่ถูกสร้างขึ้น
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));
ตัวดำเนินการ - forkJoin
forkJoin ยังรวมเธรด แต่จะปล่อยค่าเมื่อเธรดทั้งหมดเสร็จสมบูรณ์เท่านั้น
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);
ผู้ประกอบการ - แผนที่
ตัวดำเนินการแปลงแผนที่จะแปลงค่าตัวปล่อยให้เป็นค่าใหม่
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)
);
ผู้ประกอบการ – แบ่งปันแตะ
ตัวดำเนินการแตะช่วยให้คุณสร้างผลข้างเคียงได้ กล่าวคือ การกระทำใดๆ ที่ไม่ส่งผลต่อลำดับ
ผู้ดำเนินการสาธารณูปโภคสามารถเปลี่ยนกระแสเย็นให้เป็นกระแสร้อนได้
เราเสร็จสิ้นกับผู้ปฏิบัติงานแล้ว เรามาต่อกันที่เรื่อง
คิดออกมาดังๆ
แล้วฉันก็ไปดื่มชา ฉันเบื่อกับตัวอย่างเหล่านี้แล้ว😀
เรื่องตระกูล
กลุ่มหัวเรื่องเป็นตัวอย่างที่สำคัญของกระแสความร้อน คลาสเหล่านี้เป็นลูกผสมชนิดหนึ่งที่ทำหน้าที่สังเกตและผู้สังเกตการณ์ไปพร้อมๆ กัน เนื่องจากหัวเรื่องเป็นกระทู้ที่กำลังฮอต จึงจำเป็นต้องยกเลิกการติดตาม หากเราพูดถึงวิธีการหลัก ๆ ก็มีดังนี้:
- ถัดไป – ถ่ายโอนข้อมูลใหม่ไปยังสตรีม
- ข้อผิดพลาด – ข้อผิดพลาดและการยุติเธรด
- สมบูรณ์ - ความสมบูรณ์ของเธรด
- สมัครสมาชิก – สมัครสมาชิกสตรีม
- ยกเลิกการสมัคร – ยกเลิกการสมัครจากสตรีม
- asObservable – แปลงร่างเป็นผู้สังเกตการณ์
- toPromise – เปลี่ยนเป็นคำสัญญา
มี 4 5 ประเภทของวิชา
คิดออกมาดังๆ
มีคนคุยกัน 4 คนในสตรีม แต่กลับกลายเป็นว่าพวกเขาเพิ่มอีกคน อย่างที่พวกเขาพูด จงใช้ชีวิตและเรียนรู้
วิชาง่ายๆ new Subject()– ประเภทวิชาที่ง่ายที่สุด สร้างโดยไม่มีพารามิเตอร์ ส่งค่าที่ได้รับหลังจากการสมัครสมาชิกเท่านั้น
พฤติกรรม new BehaviorSubject( defaultData<T> ) – ในความคิดของฉัน วิชาประเภทที่พบบ่อยที่สุด อินพุตใช้ค่าเริ่มต้น บันทึกข้อมูลของฉบับล่าสุดซึ่งจะถูกส่งเมื่อสมัครสมาชิกเสมอ คลาสนี้ยังมีวิธีการค่าที่มีประโยชน์ซึ่งส่งกลับค่าปัจจุบันของกระแสข้อมูล
เล่นซ้ำเรื่อง new ReplaySubject(bufferSize?: number, windowTime?: number) — อินพุตสามารถเลือกใช้เป็นอาร์กิวเมนต์แรกขนาดของบัฟเฟอร์ของค่าที่จะเก็บไว้ในตัวเองและเป็นวินาทีที่เราต้องการเปลี่ยนแปลง
AsyncSubject new AsyncSubject() — ไม่มีอะไรเกิดขึ้นเมื่อสมัครสมาชิก และค่าจะถูกส่งกลับเมื่อเสร็จสมบูรณ์เท่านั้น เฉพาะค่าสุดท้ายของสตรีมเท่านั้นที่จะถูกส่งกลับ
WebSocketเรื่อง new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) — เอกสารเงียบเกี่ยวกับเขาและฉันได้พบเขาเป็นครั้งแรก หากใครรู้ว่าเขาทำอะไรโปรดเขียนแล้วเราจะเพิ่มมัน
วุ้ย. เราได้ครอบคลุมทุกสิ่งที่ฉันอยากจะบอกคุณในวันนี้ ฉันหวังว่าข้อมูลนี้จะเป็นประโยชน์ คุณสามารถอ่านรายการข้อมูลอ้างอิงได้ด้วยตัวเองในแท็บข้อมูลที่เป็นประโยชน์
ข้อมูลที่เป็นประโยชน์
ที่มา: will.com