Алдаа боловсруулалт

RxJs сангийн алдаа боловруулалтын талаар хичээлд авч үзье. Сервертэй ажиллах үеийн ямар нэгэн алдаанаас үүдэн хэрэглэгч талын код ажиллахгүй болох тохиолдол ихээр гардаг тул ийм үед алдааг барин боловсруулалт хийх зайлшгүй шаардлага гардаг. Алдааны боловруулалтыг дараах

Rx.Observable.throw(new Error('Алдаа гарлаа'))
    .subscribe((x) => {
        console.log(x);
    });

энгийн жишээн дээр харцгаая.

RxJs сангийн Observable классын алдаа хаядаг throw аргаар алдааны обьектыг үүсгээд түүнээс буцаах стримд бүртгүүлэн ирсэн өгөгдлийг консолд үзүүлнэ. Хөтөч дээр хуудсыг нээвэл

консолд алдаа гарсанг харна. Алдааг яагаад боловсруулах хэрэгтэйг авч үзье. Үүний тулд дээрх жишээнд бас нэгэн стримийг

Rx.Observable.interval(500).take(2)
    .subscribe(createSubscribe('interval'));

нэмэн оруулъя. Энд шинээр ямарч зүйл нэмээгүй шинээр стрим үүсгээд түүнд бүртгүүлсэн. Гэхдээ үүний өмнөх стрим алдаа генераци хийж байгааг санаарай. Хуудсаа шинэчилбэл өмнөхтэй яг ижил үр дүнг авна. Эхний стрим алдаа буцааснаар манай кодын цаашдын ажиллагаа унасан. Програм ингэж ажиллаж болохгүй нь ойлгомжтой учраас RxJs санд алдааг барин боловсруулалт хийдэг catch гэдэг маш хүчэрхэг оператор байдаг.

catch арга.

catch арга алдааг хүлээн авдаг тул кодоо

Rx.Observable.throw(new Error('Алдаа гарлаа'))
    .catch(error => console.log(error))
    .subscribe((x) => {
        console.log(x);
    });

Rx.Observable.interval(500).take(2)
    .subscribe(createSubscribe('interval'));

гэж өөрчлөөд хуудсаа шинэчилбэл консолд

дээрх үр дүнг хүлээн авна. Эхний мэдээлэл бол манай кодын ажиллагааг зогсоох хөтөчийн алдаа биш /саарал өнгөтэй/ консолын мэдээлэл харин дараагийнх бол catch аргаас буцаах төрлөөс өөр тодорхойгүй төрлийг буцаасан тухай хөтөчийн алдаа юм. RxJs сангийн үндсэн зарчим бол түүний ямарч арга RxJs элементийг өөрийг нь буцаах байдаг. Өөрөөр хэлбэл арга тухайн алхамд стримийн элементийг өөрийг нь буцаах ёстой. Иймээс catch аргаас хөтөчийн алдаанд дурдсаны дагуу Observable , Promise, Array эсхүл итерацилагдах утга буцаах ёстой тул үүнийг хамгийн энгийнээр

Rx.Observable.throw(new Error('Алдаа гарлаа'))
    .catch(error => Rx.Observable.of(error))
    .subscribe((x) => {
        console.log(x);
    });

Rx.Observable.interval(500).take(2)
    .subscribe(createSubscribe('interval'));

гэж хэрэгжүүлж болно. Кодод сангийн of аргаар catch аргаас стримийг буцаасан. Одоо хуудсаа шинэчилбэл

манай кодод алдаа гаралгүйгээр амжилттай биелэгдсэн үр дүнг авна. Хичээлийн бүхий л кодод ашиглаж байгаа createSubscribe функцийг

function createSubscribe(name) {
    return {
        next(x) {
            console.log(name, ': ', x);
        },
        error(err) {
            console.log('Error: ', err);
        },
        complete() {
            console.log(name, ': Completed!');
        }
    }
}

дахин санацгаая. Дээрх кодод гурван функц байгаагийн next, complete аргуудыг хичээлүүдэд тогтмол ашигласан. Харин ямар нэгэн алдааг хүлээн авах error функцийг бид ашиглаагүй ирсэн. Функц алдааг catch аргаар барин боловсруулах үед дуудагдана. Иймээс createSubscribe функцийн эргэн дуудалтын функцуудийн кодыг

function createSubscribe(name) {
    return {
        next(x) {
            console.log(name, ': ', x);
        },
        error(err) {
            console.log(name, ': ', err);
        },
        complete() {
            console.log(name, ': Completed!');
        }
    }
}

гэж нэг хэлбэрт оруулаад үндсэн кодыг

Rx.Observable.throw(new Error('Алдаа гарлаа'))
    .catch(error => Rx.Observable.of(error))
    .subscribe(createSubscribe('catch'));

Rx.Observable.interval(500).take(2)
    .subscribe(createSubscribe('interval'));

хэлбэртэй болгоод хуудсаа шинэчилбэл

консолд дээрх үр дүнг авна. Үр дүнгээс харвал catch аргаас буцаасан стримд бүртгүүлэхдээ createSubscribe аргыг catch параметртэйгээр дамжуулсан тул эхлээд createSubscribe функцийн error функц дуудагдаад дараа нь стримийг дуусгаад цааш дараагийн стримийн боловсруулалт явагдан кодын ажиллагаа бүрэн дууссан байгаа.

onErrorResumeNext арга.

Практикт ямар нэгэн потокоос /стрим/ алдаа өгвөл бид өөр нэг стримийг эхлүүлэх шаардлага ихээр гардаг. Бодит жишээ бол серверт хүсэлт илгээх. Бид серверт хүсэлт илгээхэд тэндээс хариугаар алдаа буцаавал өгөгдлийг өөр серверээс авах хэрэгтэй болох эсхүл хэрэглэгчид мэдээллийг үзүүлэх гэх мэтээр. Иймэрхүү тохиолдол ихээр гардаг. RxJs санд энэхүү ажиллагааг эвтэйхэн гүйцэтгэх onErrorResumeNext гэдэг арга байдаг.

const s1$ = Rx.Observable.throw(new Error('Алдаа гарлаа'));
const s2$ = Rx.Observable.interval(500).take(2);

s1$.onErrorResumeNext(s2$)
    .subscribe(createSubscribe('onErrorResumeNext'))

жишээг харцгаая. Бидэнд s1$, s2$ стримүүд байгаа. Гэхдээ эхний стрим шууд алдаа хаяж байгаа учраас s1$.onErrorResumeNext(s2$) оператор s1$ стримээс алдаа өгвөл s2$ стримийг эхлүүл гэсэн үг. Стримд шууд алдаа хаяхаар заасан байгаа нь таныг төөрөгдөлд оруулж болох талтай. Үүнийг стримээс өгөгдөл тараах үед алдаа гарвал дараагийн стримийг л эхлүүлнэ гэж ойлгоорой. Дараа нь бид шинээр эхлүүлсэн стримд бүртгүүлсэн. Одоо хуудсаа шинэчилбэл

дээрх үр дүнг авна. Эхний стрим алдаа хаясан тул түүний оронд хоёрдугаар стримийг эхлүүлэн тэр нь амжилттай дууссан байгаа. Эхний стримийн талаар ямар ч мэдээлэл консолд гаргаагүй шууд л дараагийн стримийг эхлүүлсэн. Эндээс арга ямар нэгэн алдааны үед түүний өөр боловсруулалт эсхүл зохих мэдээллийг хэрэглэгчид дамжуулахад ихээхэн тустай нь харагдана.

Мэдээлэл таалагдсан бол найзуудтайгаа хуваалцаарай.

  Нээгдсэн тоо: 455 Төлбөртэй

Формд төрөл бүрийн элементүүдийг оруулахыг өмнөх хичээлүүдэд үзсэн. Формтой ажиллах ажиллагааны бас нэгэн чухал хэсэг бол түүний validation буюу шалгалтын хэсэг байдаг. Vuejs фреймворк бүгдийг хэрэгцээтэй үед нь хэрэглэх гэсэн зарчмыг баримталдаг. Өөрөөр хэлбэл фреймворкийн үндсэн пакет хамгийн хэрэгтэй суурь зүйлүүдийг агуулаад бусад шаардлагатай хэсгийг нэмэлтээр суулган ашиглах гэсэн үг юм. Формын шалгалт хийх ажиллагаа Vuejs фреймворкийн үндсэн пакетад байдаггүй бөгөөд формд шалгалт хийх хэрэгтэй бол шаардлагатай пакетыг суулгах шаардлага гарна. Энэхүү зарчим нь програмын хэмжээ, ажиллагааны хурдад сайн нөлөө үзүүлдэг сайн аргачлал юм. Хичээлээр формын шалгалтын бэлтгэл болгоод цэвэр төслийг үүсгэе.

  Нээгдсэн тоо: 2661 Төлбөртэй

JavaScript –д массивыг обьект байдлаар үүсгэж болдог. Энэ аргаар массив үүсгэхэд конструкторт зөвхөн ганцхан тоон төрлийн параметр (массивын элементийн тоо) хэрэгтэй болно. Хэрвээ нэгээс илүү болон тоон бус төрлийн нэг параметр дамжуулбал эдгээрийг массивын элемент гэж үзэх бөгөөд хооронд нь таслалаар зааглана. Мөн түүнчлэн нэг ч параметр дамжуулахгүй байж болно. Тэгвэл хоосон массив үүснэ. Энэ обьектыг стандарт аргаар үүсгэнэ.

<массивын_нэр> = new Array(<элементийн тоо>);
<массивын_нэр> = new Array(<массивын элементүүд>);

Массив үүсгэх жишээнүүд

  Нээгдсэн тоо: 1032 Бүртгүүлэх

Навигацийг /чиглүүлэгч/ үүсгэх хичээлээр үүсгэсэн цэснүүдээс шилжилт хийхэд сүүлд сонгогдсон цэс аль нь болохыг мэдэхэд хүндрэлтэй байгаа. Иймээс хуудасны идэвхитэй холбоосыг тэмдэглэх классыг хэрхэн оруулан ирэхийг авч үзье. Bootstrap -д сонгогодсон цэсийг тэмдэглэх active гэсэн класс байдгийг цэснүүдийн аль нэгэнд

        <ul class="navbar-nav">
          <li class="nav-item">
            <router-link class="nav-link" to="/">Home</router-link>
          </li>
          <li class="nav-item active">
            <router-link class="nav-link" :to="'/cars'">Cars</router-link>
          </li>
        </ul>

тавин өгөөд хуудсаа хөтөч дээр нээвэл

  Нээгдсэн тоо: 202 Төлбөртэй

Динамик жагсаалттай ажиллах боломжуудын тухай авч үзье. Манай хичээлийн програм App, Car компонентуудтай болоод байгаа.

App компонентийн Toogle car товч машиний мэдээллийн жагсаалтыг нээх, хаах ажиллагааг хийх бол Car компонентийн Дарах товчоор App компонентод h1 гарчигаар үзүүлж буй текстийг машиний нэрээр сольдог. Динамик жагсаалттай ажиллах практик болгон програмд Car компонентийн Дарах товчийг input -ээр солиод input -д оруулсан мэдээллээр Car компонентоос машиний нэрийг өөрчлөх машиний мэдээллийг жагсаалтаас хасах ажиллагаануудыг хэрэгжүүлье.

Класс ба структурт ердийн талбар, арга, шинжүүдээс гадна статик талбар, арга, шинжүүд байж болдог. Статик талбар, арга, шинжүүд…

Нээгдсэн тоо : 48

 

Хичээлээр useState -тэй тун төстэй useRef хукийн талаар авч үзье. useRef хукийн онцлог ашиглалтыг компонент хэдэн удаа дахин…

Нээгдсэн тоо : 43

 

Хүүхдүүд тооны хичээлийг анхнаасаа зөв ойлгон сураагүйгээс анги ахих тусмаа математикийн хичээлийнн хоцрогдолоос болоод дургүй болох тал байдаг.…

Нээгдсэн тоо : 103

 

Нийтлэлээр графикийн хэвүүдийн /GUI pattern/ түүхийг авч үзье. Боловсруулалтын графикийн хэвүүдийг 30 гаруй жилийн туршид боловсруулж байгаа бөгөөд…

Нээгдсэн тоо : 82

 

Хааяа өөр өөр параметрүүдийн багцтай нэг аргыг үүсгэх шаардлага гардаг. Ирсэн параметрүүдээс хамааран аргын тодорхой хэрэгжүүлэлтийг хэрэглэнэ. Ийм…

Нээгдсэн тоо : 84

 

Ямарч програмын ажиллагааны чухал хэсэг бол төрөл бүрийн мэдээллийн боловсруулалт, тэдгээртэй ажиллахтай холбоотой байдаг. Иймээс энэ хичээлээс vuejs

Нээгдсэн тоо : 65

 

Хичээлээр react -ийн хукуудаас их өргөн ашиглагддаг useEffect -ийн талаар авч үзье. useEffect -ийн ажиллагааг судлах хуудасны кодийг

Нээгдсэн тоо : 61

 

Илэрхийлэл бол математикийн хэлний үндэс болсон суурь ойлголтуудын нэг. Математикийн илэрхийллийг тооцооны алгоритм, аксиом, теорем, бодлогын нөхцлүүд гээд…

Нээгдсэн тоо : 83

 

Програм зохиох бол нарийн төвөгтэй ажил. Ямар ч програмын хувьд өөрийн хийх ажлаа гүйцэтгэхийн чацуу цаашдаа хөгжих, ажлын…

Нээгдсэн тоо : 75