תכנות אסינכרוני ב-JavaScript (Callback, Promise, RxJs)

שלום לכולם. סרגיי אומלניצקי בקשר. לא מזמן אירחתי זרם על תכנות ריאקטיבי, שבו דיברתי על אסינכרוני ב-JavaScript. היום אני רוצה לרשום הערות על החומר הזה.

אבל לפני שנתחיל את החומר העיקרי, אנחנו צריכים לעשות הערת מבוא. אז נתחיל בהגדרות: מה זה מחסנית ותור?

לַעֲרוֹם הוא אוסף שהרכיבים שלו מתקבלים על בסיס LIFO אחרון, יוצא ראשון

תור הוא אוסף שהרכיבים שלו מתקבלים על בסיס ראשון נכנס, יוצא ראשון FIFO

בסדר, בוא נמשיך.

JavaScript היא שפת תכנות עם חוט יחיד. המשמעות היא שיש רק חוט אחד של ביצוע וערימה אחת שעליה פונקציות ממוקמות בתור לביצוע. לכן, JavaScript יכול לבצע רק פעולה אחת בכל פעם, בעוד שפעולות אחרות ימתינו לתורן בערימה עד שייקראו להן.

ערימת שיחות הוא מבנה נתונים שבפשטות מתעד מידע על המקום בתוכנית בו אנו נמצאים. אם נעבור לפונקציה, אנו דוחפים את הכניסה שלה לראש הערימה. כאשר אנו חוזרים מפונקציה, אנו מקפיצים את האלמנט העליון ביותר מהמחסנית ומגיעים חזרה למקום שבו קראנו לפונקציה. זה כל מה שהמחסנית יכולה לעשות. ועכשיו שאלה מעניינת ביותר. כיצד א-סינכרוניה פועלת ב- JavasScript?

למעשה, בנוסף לערימה, לדפדפנים יש תור מיוחד לעבודה עם מה שנקרא WebAPI. הפונקציות בתור זה יבוצעו לפי הסדר רק לאחר שהמחסנית נוקה לחלוטין. רק לאחר מכן הם נדחפים מהתור אל הערימה לביצוע. אם יש לפחות אלמנט אחד בערימה כרגע, אז לא ניתן להוסיף אותם לערימה. בדיוק בגלל זה, קריאה לפונקציות לפי פסק זמן לרוב אינה מדויקת בזמן, מכיוון שהפונקציה לא יכולה להגיע מהתור לערימה כשהיא מלאה.

הבה נסתכל על הדוגמה הבאה ונתחיל עם ביצועה שלב אחר שלב. בואו נראה גם מה קורה במערכת.

console.log('Hi');
setTimeout(function cb1() {
    console.log('cb1');
}, 5000);
console.log('Bye');

1) שום דבר עדיין לא קורה. מסוף הדפדפן נקי, ערימת השיחות ריקה.

2) לאחר מכן הפקודה console.log('Hi') מתווספת לערימת השיחות.

3) והוא מתקיים

4) לאחר מכן console.log('Hi') מוסר מחסנית השיחות.

5) כעת עברו לפקודה setTimeout(פונקציה cb1() {… }). זה מתווסף לערימת השיחות.

6) הפקודה setTimeout(פונקציה cb1() {… }) מבוצעת. הדפדפן יוצר טיימר שהוא חלק מממשק ה-API של האינטרנט. זה יבצע ספירה לאחור.

7) הפקודה setTimeout(function cb1() {… }) השלימה את עבודתה והוסרה מחסנית השיחות.

8) הפקודה console.log('ביי') מתווספת לערימת השיחות.

9) הפקודה console.log('Bye') מבוצעת.

10) הפקודה console.log('ביי') מוסרת מחסנית השיחות.

11) לאחר שחלפו לפחות 5000 אלפיות השנייה, הטיימר מסתיים ומציב את ההתקשרות חזרה cb1 בתור להתקשרות חזרה.

12) לולאת האירוע לוקחת את הפונקציה cb1 מהתור להתקשרות חזרה וממקמת אותה בערימת השיחות.

13) הפונקציה cb1 מבוצעת ומוסיפה את console.log('cb1') לערימת השיחות.

14) הפקודה console.log('cb1') מבוצעת.

15) הפקודה console.log('cb1') מוסרת מחסנית השיחות.

16) הפונקציה cb1 מוסרת מחסנית השיחות.

בואו נסתכל על דוגמה בדינמיקה:

ובכן, בדקנו כיצד מיושמת אסינכרון ב-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 ניתן ליישם רק על ידי פונקציות. ניתן להעביר אותם כמו כל משתנה אחר לפונקציות אחרות. כך נולדו שיחות חוזרות. וזה מגניב, כיף ושובב, עד שזה הופך לעצב, מלנכוליה ועצב. למה? זה פשוט:

• ככל שהמורכבות של הקוד גדלה, הפרויקט הופך במהירות לבלוקים לא ברורים, מקוננים שוב ושוב - "לעזאזל להתקשר בחזרה".
• קל לפספס טיפול בשגיאות.
• אתה לא יכול להחזיר ביטויים עם חזרה.

עם כניסתה של הבטחה, המצב השתפר מעט.

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.all
• אנחנו יכולים לפתור א-סינכרון מקונן באמצעות async/wait

אבל להבטחות יש מגבלות. למשל, אי אפשר לבטל הבטחה בלי לרקוד עם טמבורין, ומה שהכי חשוב זה שזה עובד עם ערך אחד.

ובכן, ניגשנו בצורה חלקה לתכנות ריאקטיבי. עייף? ובכן, למרבה המזל, אתה יכול ללכת להכין תה, לחשוב על זה ולחזור לקרוא עוד. ואני אמשיך.

תכנות ריאקטיבי היא פרדיגמת תכנות המתמקדת בזרימות נתונים והפצת שינויים. בואו נסתכל מקרוב על מה זה זרם נתונים.

// Получаем ссылку на элемент
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).

בואו נבין את המושגים הבסיסיים של ספרייה זו.

נצפה, צופה, מפיק

ניתן לצפות הוא הסוג הבסיסי הראשון שנבחן. מחלקה זו מכילה את החלק העיקרי של היישום RxJs. הוא משויך לזרם הניתן לצפייה, שניתן להירשם אליו באמצעות שיטת המנוי.

Observable מיישמת מנגנון עוזר ליצירת עדכונים, מה שנקרא משקיף. מקור הערכים עבור הצופה נקרא מפיק. זה יכול להיות מערך, איטרטור, שקע אינטרנט, אירוע כלשהו וכו'. אז אנחנו יכולים לומר ש-observable הוא מנצח בין מפיק לצופה.

Observable מטפל בשלושה סוגים של אירועי Observer:

• הבא - נתונים חדשים
• שגיאה - שגיאה אם ​​הרצף הסתיים עקב חריג. אירוע זה מרמז גם על השלמת הרצף.
• שלם - אות לגבי סוף הרצף. זה אומר שלא יהיו יותר נתונים חדשים

בוא נראה את ההדגמה:

בהתחלה נעבד את הערכים 1, 2, 3 ולאחר שנייה אחת. נקבל 1 ונסיים את הזרם שלנו.

חושב בקול רם

ואז הבנתי שלספר זה יותר מעניין מלכתוב על זה. 😀

מִנוּי

כשאנחנו נרשמים לזרם אנחנו יוצרים מחלקה חדשה מִנוּייםמה שנותן לנו את האפשרות לבטל את המנוי באמצעות השיטה לבטל את המנוי. אנו יכולים גם לקבץ מנויים בשיטה להוסיף. ובכן, זה הגיוני שנוכל לבטל קבוצות של שרשורים באמצעות להסיר. שיטות ההוספה וההסרה מקבלים מנוי אחר כקלט. ברצוני לציין שכאשר אנו מבטלים את המנוי, אנו מבטלים את המנוי מכל מנויי הילדים כאילו הם קראו לשיטת ביטול המנוי. לך על זה.

סוגי זרמים

חַם
קַר

המפיק נוצר מחוץ לצפייה
המפיק נוצר בתוך ניתן לצפייה

הנתונים מועברים בזמן יצירת הנצפה
הנתונים מסופקים בזמן ההרשמה

צריך היגיון נוסף לביטול המנוי
השרשור מסתיים מעצמו

משתמש במערכת יחסים של אחד לרבים
משתמש במערכת יחסים של אחד לאחד

לכל המנויים יש אותה משמעות
המנויים הם עצמאיים

נתונים עלולים ללכת לאיבוד אם אין לך מנוי
מוציא מחדש את כל ערכי הזרם עבור מנוי חדש

כדי לתת אנלוגיה, הייתי חושב על זרם חם כעל סרט בתיאטרון. באיזו נקודת זמן הגעת, מאותו רגע התחלת לצפות. הייתי משווה זרימה קרה לשיחה בטכנולוגיה. תמיכה. כל מתקשר מאזין להקלטת הדואר הקולי מתחילתו ועד סופו, אך אתה יכול לנתק באמצעות ביטול הרשמה.

ברצוני לציין שיש גם מה שנקרא זרימות חמות (נתקלתי בהגדרה זו לעיתים רחוקות ביותר ורק בקהילות זרות) - מדובר בזרימה שהופך מזרימה קרה לזרימה חמה. נשאלת השאלה - היכן להשתמש)) אתן דוגמה מהתרגול.

אני עובד עם Angular. הוא משתמש באופן פעיל ב-rxjs. כדי לקבל נתונים לשרת, אני מצפה לשרשור קר ומשתמש בשרשור הזה בתבנית באמצעות 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. נסתכל על כמה מהפופולריים ביותר, ופרטים נוספים על המפעילים ניתן למצוא באמצעות הקישורים במידע השימושי.

מפעילים - של

נתחיל עם מפעיל העוזר של. זה יוצר צפייה המבוססת על ערך פשוט.

מפעילים - מסנן

מפעיל המסנן, כפי שהשם מרמז, מסנן את אות הזרם. אם האופרטור מחזיר true, הוא מדלג הלאה.

מפעילים - קח

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

האופרטור combineLatest דומה במקצת ל- belofte.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> ) – לדעתי, סוג הנושא הנפוץ ביותר. הקלט מקבל את ערך ברירת המחדל. שומר תמיד את הנתונים של הגיליון האחרון, אשר מועבר בעת ההרשמה. למחלקה זו יש גם שיטת ערך שימושית, המחזירה את הערך הנוכחי של הזרם.

ReplaySubject new ReplaySubject(bufferSize?: number, windowTime?: number) - הקלט יכול אופציונלי לקחת כארגומנט הראשון את גודל מאגר הערכים שהוא יאחסן בעצמו, וכשני את הזמן שבו אנו זקוקים לשינויים.

AsyncSubject new AsyncSubject() - שום דבר לא קורה בעת הרשמה, והערך יוחזר רק לאחר השלמתו. רק הערך האחרון של הזרם יוחזר.

WebSocketSubject new WebSocketSubject(urlConfigOrSource: string | WebSocketSubjectConfig<T> | Observable<T>, destination?: Observer<T>) - התיעוד שותק לגביו ואני רואה אותו בפעם הראשונה. אם מישהו יודע מה הוא עושה, נא לכתוב ונוסיף את זה.

פיו. ובכן, כיסינו את כל מה שרציתי לספר לכם היום. אני מקווה שהמידע הזה היה שימושי. אתה יכול לקרוא את רשימת ההפניות בעצמך בלשונית המידע השימושי.

מידע שימושי

• קישור לזרם
• איך JS עובד: סקירה כללית של המנוע, מנגנוני זמן ריצה, ערימת קריאות
• איך JS עובד: לולאת אירועים, אסינכרון וחמש דרכים לשפר את הקוד שלך עם אסינכרון/חכה
• איך Event Loop עובד ב-JavaSript
• האבולוציה של JavaScript אסינכרוני
• מהו RxJS ומדוע כדאי לדעת עליו?
  
• יישום מעשי של RxJS
• מדריך RxJS Observables - יצירה והרשמה ל- Observables
• RXJS: תצפית חמה וקרה
• מחלקות, פונקציות ליצירת Observable. מפעילים.
• מפעילי RxJS לפי דוגמה
• רשימת API
• מגוון נושאים ולוחות זמנים ב-RxJS

מקור: www.habr.com