Խուսափեք կորցնել բոլոր տվյալները mergeMap RXJS օպերատորում, երբ մի քանի ներքին դիտելիություն ձախողվում է

Անկյունային RXJS օպերատորները՝ mergeMapև forkJoinշատ օգտակար են, երբ ցանկանում եք կատարել առաջադրանքներ զուգահեռաբար:

RXJS օպերատորները՝ mergeMapև forkJoin շատ օգտակար են, երբ ցանկանում եք կատարել առաջադրանքներ զուգահեռաբար, այսինքն՝ այստեղ կարևոր է միայն արդյունք ստանալը, իսկ առաջադրանքների կատարման կարգը իրականում չէ: այստեղ կարևոր է:

Դիտարկենք այս սցենարը.

1. Ես զուգահեռաբար վերցնում եմ 5 օգտվողների տվյալներ՝ A, B, C, D և E՝ օգտագործելով mergeMapօպերատորը: Յուրաքանչյուր օգտատիրոջ տվյալները ստանալու համար արված API զանգը կհամապատասխանի ներքին դիտարկելի բաժանորդագրությանը:
2. Ենթադրենք, 3 օգտատեր B, C և D գոյություն չունեն: Այսպիսով, այս 3 օգտատերերին համապատասխանող API-ի կանչերը կձախողվեն HTTP 404-ով: Սա նշանակում է, որ 3 դիտելիները կսխալվեն, իսկ API-ի զանգերը, որոնք համապատասխանում են մյուս 2 օգտվողներին A և E, որոնք կարող են հնարավորություն ունենալ: հաջողությունը նույնպես կվերանա, եթե դրանք դեռ ընթացքի մեջ են:
3. Ես չեմ ուզում կորցնել մնացած 2 օգտատերերի տվյալները՝ A և D միայն այն պատճառով, որ API-ի 3 օգտվողների համար B, C և D զանգերը ձախողվել են:
4. Ես կցանկանայի նաև ցուցադրել 3 օգտվողների հետ կապված սխալները B, C և D:

Ստորև ներկայացված է սքրինշոթը, թե ինչի եմ ուզում հասնել: Դա փոքր անկյունային հավելված է: Ես փորձել եմ վերցնել 5 օգտատերերի տվյալներ, որոնցից 3-ը գոյություն չունի։ Բայց ես չեմ կորցրել մյուս 2 օգտվողների տվյալները:

Մենք ցուցադրել ենք 3 օգտվողներին համապատասխանող սխալի հաղորդագրությունները, ինչպես նաև ցուցադրել ենք այն օգտատերերի ID-ն ու անունը, որոնց տվյալները կարողացանք առբերել:

Բաղադրիչի ձևանմուշ.Սա հենց այն է, ինչ մենք տեսնում ենք սքրինշոթում:

Fetch Users Dataկոճակը կկանչի task1(),որտեղ մենք փորձում ենք առբերել 5 օգտվողների տվյալները:

Մենք բաժանորդագրվել ենք 2 դիտելի errorObservable$ և task1$՝ համապատասխանաբար ցուցադրելու սխալները և օգտվողի տվյալները:

Բաղադրիչի դաս.

public list = [50, 1, 60, 9, 30];

Ցանկի զանգվածը պարունակում է օգտատերերի ID-ների զանգված, որոնց տվյալները մենք ցանկանում ենք վերցնել: Գոյություն չունեցող օգտվողները ID-ներով են 50, 60 և 30:

Անցում դեպի task1():

1. Մենք վերածել ենք զանգվածի ցուցակը սառը դիտարկելիի՝ օգտագործելով օպերատորից:
2. mergeMapօպերատորը կնշի սառը դիտելիությունից արտանետված օգտվողի ID-ն ներքին դիտելիության մեջ, որը վերադարձվում է getUser()-ի կողմից Տվյալների ծառայություն:

getUser()-ը կանչում է API՝ օգտվողի ID-ին համապատասխան տվյալները ստանալու համար:

getUser(id: number): Observable<any> {
return this.http
.get(`https://jsonplaceholder.typicode.com/users/${id}`)
.pipe(catchError((err) => throwError(err)));
}

3. Եթե API-ի զանգը հաջողված է, ապա քարտեզի օպերատորի ներսում մենք օգտատիրոջ տվյալները տեղափոխում ենք տեղական փոփոխական userData: Սա հասանելի տվյալներն են, երբ մենք բաժանորդագրվում ենք կաղապարի task1$ դիտարկելի-ին:

map((result) => {
userData.push(result);
return userData;
}),

4. Եթե API-ի զանգը ձախողվի, ապա catchError օպերատորի ներսում մենք սկզբում սեղմում ենք սխալի օբյեկտը տեղական փոփոխական errorListայնուհետև փոխանցում errorList: error$ առարկային: Մենք բաժանորդագրվում ենք այս թեմային կաղապարում՝ սխալները ցուցադրելու համար:

catchError((err) => {
errorList.push(err);
this.error$.next(errorList);
return EMPTY;
})

Ամբողջ աշխատանքային օրինակը կարելի է գտնել ստորև.

Եթե ​​կարծում եք, որ task1()-ում տեղական փոփոխականների օգտագործումը userDataև errorList իսկապես ավելորդ է, և կարող են լինել միացման ավելի լավ եղանակներ: օգտագործողի տվյալները կամ սխալի տվյալները զանգվածի մեջ, ապա ստուգեք ստորև բերված օրինակը: Այստեղ մենք օգտագործել ենք RXJS սկանավորման օպերատորը, որպեսզի հասնենք օգտվողի /սխալի օբյեկտների միացմանը զանգվածի մեջ:

Ավելի շատ բովանդակություն PlainEnglish.io կայքում: Գրանցվեք մեր անվճար շաբաթական տեղեկագրին: Հետևեք մեզ Twitter, LinkedIn, YouTube և Discord-ում: . Հետաքրքրվա՞ծ եք Growth Hacking-ով: Դիտեք Circuit: