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

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

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

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

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

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

<template>
  <div>
      <h2 v-colored>{{ title }}</h2>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: "Hello I am Vue!"
    }
  }
}
</script>

кодтой болгосон.

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

Ямарч түвшингийн төсөлд ихэнх тохиолдолд өгөгдлийн сантай ажиллах хэрэгцээ гарч ирдэг. Иймээс Vuejs фреймворкоор өгөгдлийн сантай ажиллах суурь ойлголтыг сайн ойлгосон байх шаардлагатай. Бид Post обьектыг үүсгэх хичээлд өгөгдлийн санд бичлэг нэмэн оруулахыг сурсан бол энэ удаад vue-resource санг ашиглан өгөгдлийн сангаас мэдээлэл татан авахыг сурцгаая.

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

Директивийн амьдралын циклүүдийг /үе/ мэдэж байх хэрэгтэй. Өөрийн директив үүсгэх хичээлд директивийг үүсгэх шатанд ажиллах арга bind -ийг мэдэн авсан. Аргаар директивийн инициализацийг хийн түүнийг виртуал DOM дахь элементэд холбох бөгөөд энэ үед тухайн директив бодит DOM -ийн модонд орж ирээгүй байдаг. Директивийн амьдралын циклүүдийг төслийн color.js файлд тодорхойлсон обьектын кодод нэмье.

export default {
  bind(el, bindings, vnode) {
    console.log('bind')
    el.style.color = 'green'
  },
  inserted(el, bindings, vnode) {
    console.log('inserted')
  },
  update(el, bindings, vnode, oldVnode) {
    console.log('update')
  },
  componentUpdated(el, bindings, vnode, oldVnode) {
    console.log('componentUpdated')
  },
  unbind() {
    console.log('unbind')
  }
}

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

ES6 -д шинээр бий болсон бас нэг зүйл болох функцийн анхдагч параметрүүдийн талаар хичээлд авч үзэцгээе. Эхлээд ES5 -д функцийн параметрт анхдагч утгыг олгохдоо ашигладаг байсан аргачлалыг харуулсан жишээг авч үзье.

const func = (a) => {
    return a;
};
console.log(func());

Функцийг тодорхойлохдоо ES6 -гийн бичлэгээр бичсэн. Терминалаас webpack -ийг дуудан багцыг үүсгээд index.html файлыг нээгээд консолыг харвал

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

 

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

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

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

интеграл бод

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

 

хязгаарыг бод.

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

 

утгыг ол.

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