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

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$ стримийг эхлүүл гэсэн үг. Стримд шууд алдаа хаяхаар заасан байгаа нь таныг төөрөгдөлд оруулж болох талтай. Үүнийг стримээс өгөгдөл тараах үед алдаа гарвал дараагийн стримийг л эхлүүлнэ гэж ойлгоорой. Дараа нь бид шинээр эхлүүлсэн стримд бүртгүүлсэн. Одоо хуудсаа шинэчилбэл

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

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

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

JavaScript бол обьект хандлагатай хэл. Нөхцөл ба циклийн үйлдлүүд гээд хэлний үндсэн бүтцээс бусад бараг бүх боломжууд ямар нэгэн байдлаар обьектыг ашиглан хийгдэнэ. Зарим нэгэн тодорхой шийдлүүдийг жишээ нь HTML, XML гэх мэтийн хуудасны боловсруулалтыг хуудасны обьектын моделыг шууд ашиглах замаар хийдэг бол зарим зорилгод жишээ нь ердийн мөрийн өгөгдлүүдийг String обьектыг ашиглах гэх мэтээр. Обьект энэ бол өгөгдлийн хүнд төрөл. Гэсэн хэдий ч энэ ойлголтыг сайн ойлгохгүйгээр Javascript -ын хүч чадлыг гаргах боломжгүй. Энэ хичээлээр бид JavaScript -ын өгөгдлийн төрлийн нэг болох хэрэглэгчийн обьектын талаар авч үзнэ.

  Нээгдсэн тоо: 1721 Нийтийн

EcmaScript 6 -гийн зарим обьектуудад шинээр бий болсон аргуудын талаар хичээлд авч үзье.

Обьектыг өргөжүүлэх

Обьектын өргөжүүлэлтийг хийх аргыг

let obj1 = {a: 1};
let obj2 = {b: 2, c: 3};

обьектууд дээр авч үзье. obj1 -ийг obj2 -оор өргөжүүлье гэвэл ES6 -д бий болсон assign аргыг

Object.assign(obj1,obj2);

ашигладаг. Аргад эхний параметрээр өргөжих /target/ обьектыг харин хоёрдахь параметрээр өргөжүүлэх /source/ обьектыг өгнө. Дээрх командын дараа

  Нээгдсэн тоо: 497 Нийтийн

react програмд css препроцессорийг /CSS preprocessor/ хэрхэн ашиглах талаар авч үзье. css препроцессор /CSS preprocessor/ гэдэг нь тусгай бичлэгийн дүрмээр бичигдсэн кодоос ердийн css кодийн генераци хийдэг програмууд юм. Sass, Less, PostCss гээд олон тооны препроцессорууд байдаг ба эдгээрийн ихэнх нь css -ийн боломжуудыг нэмэгдүүлэн кодийн удирдагыг сайжруулдаг. react-scripts -ийн 2 -оос дээшхи хувилбарт css препроцессорийг оруулан ирэх ажиллагааг амархан болгон өгсөн. react програмд css препроцессорийг ашиглахын тулд эхлээд препроцессорийг суулгах хэрэгтэй.

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

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

    <body>
        <div id="app">
            <h2>Тоолуур = {{ counter }}</h2>
            <button v-on:click="addCounter">Нэмэгдүүлэх</button>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    counter: 0
                },
                methods: {
                    addCounter: function() {
                        this.counter++
                    }
                }
            })
        </script>
    </body>

өөрчилсөн. Хөтөч дээр хуудсаа нээгээд Нэмэгдүүлэх товчийг дарвал тоолуурын утга нэгээр нэмэгдэж байгаа эсэхийг шалган үзээрэй.

Үйл явдал /event/ тодорхой үйлдэл хийгдсэн талаар системд мэдэгддэг. Хэрвээ бид энэхүү үйлдлийг ажиглах хэрэгтэй бол яг энд…

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

 

Манай төсөл олон хуудсуудтай болон тэдгээрийн хооронд динамикаар шилжилт хийж байгаа ч тухайн үед шилжилт хийгдсэн хуудаст тохирох…

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

 

Зочин (Visitor) паттерн классуудыг өөрчлөхгүйгээр тэдгээрийн обьектуудын үйлдлийг тодорхойлох боломжийг олгоно. Зочин хэвийг ашиглахдаа классуудын хоёр ангилалыг тодорхойлно.…

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

 

Лямбда-илэрхийлэл нь нэргүй аргын хураангуй бичилтийг илэрхийлнэ. Лямбда-илэрхийлэл утга буцаадаг, буцаасан утгыг өөр аргын…

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

 

Кодийн сайжруулалт /рефакторинг/ хичээлээр програмийн кодоо react -ийн зарчимд нийцүүлэн компонентод салгасан.…

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

 

Хадгалагч (Memento) хэв обьектын дотоод төлвийг түүний гадна гаргаж дараа нь хайрцаглалтын зарчмыг зөрчихгүйгээр обьектыг сэргээх боломжийг олгодог.

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

 

Делегаттай нэргүй арга нягт холбоотой. Нэргүй аргуудыг делегатийн хувийг үүсгэхэд ашигладаг.
Нэргүй аргуудын тодорхойлолт delegate түлхүүр үгээр…

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

 

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

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

 

Төсөлд react-router-dom санг оруулан чиглүүлэгчдийг бүртгүүлэн тохируулсан Санг суулган тохируулах хичээлээр бид хуудас…

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

 
Энэ долоо хоногт

функцийн тодорхойлогдох мужийг ол.

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

 

Арифметик прогресын 3-р гишүүн 5, 7-р гишүүн 13 бол эхний 10 гишүүний нийлбэрийг ол.

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

 

тэгшитгэлийн шийдүүдийн нийлбэрийг ол.

Жич: Тэгшитгэлийг заавал бодох гээд үзээрэй. Иймэрхүү бодлого ЭЕШ -д бараг ирэхгүй ч математикийг ганцхан ЭЕШ -аар хязгаарлавал та өөрийгөө хөгжүүлэхээ боомилсонтой адил.

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