Unterschied zwischen Observable und Promise in Angular 8

Blog

Unterschied zwischen Observable und Promise in Angular 8

Observables und Promise liefern uns beide Abstraktionen, die uns helfen, mit der asynchronen Natur von Anwendungen umzugehen.



Versprechen

Promise arbeiten mit asynchronen Operationen. Sie geben entweder einen einzelnen Wert zurück (d. h. das Versprechen wird aufgelöst) oder eine Fehlermeldung (d. h. das Versprechen wird abgelehnt)



Eine weitere wichtige Sache, die Sie bei der Zusage beachten sollten, ist, dass eine von einer Zusage ausgehende Anfrage nicht storniert werden kann.

Nachteile des Versprechens:



  1. Der Benutzer konnte eine Anfrage an die API nicht stornieren
  2. Der Benutzer konnte einen fehlgeschlagenen Anruf nicht wiederholen
  3. Da unsere Anwendung größer wird, wird Promise schwer zu verwalten

Observables

Ein Observable ist ein Array oder eine Folge von Ereignissen im Zeitverlauf. Es hat mindestens zwei Teilnehmer. Der Ersteller (die Datenquelle) und der Abonnent (Abonnement, bei dem Daten konsumiert werden). Im Vergleich zu einem Versprechen kann ein Observable storniert werden.

wo kann man orca kaufen

Bei RxJS geht es darum, die Ideen von Promise Callbacks und Datenfluss zu vereinen und die Arbeit mit ihnen zu erleichtern.

Observables bietet Operatoren wie map.forEach, Reduce,…ähnlich einem Array.

Es gibt auch leistungsstarke Operatoren wie retry().or answer(),retryWhen(),delay()

Voraussetzungen

  • Grundkenntnisse in Angular
  • Visual Studio Code muss installiert sein
  • Angular CLI muss installiert sein
  • Node JS muss installiert sein

Back-End

Hier werden wir mit Backend-bezogenem Code den SQL-Server verwenden

Der allererste Schritt ist das Erstellen einer Datenbank

Schritt 1

Lassen Sie uns eine Datenbank auf Ihrem lokalen SQL Server erstellen. Ich hoffe, Sie haben SQL Server 2017 auf Ihrem Computer installiert (Sie können auch SQL Server 2008, 2012 oder 2016 verwenden).

create database country

Schritt 2

Erstellen Sie eine Ländertabelle mit dem folgenden Code:

CREATE TABLE tbl_Countries ( CountryID INT ,CountryName VARCHAR(50) ,TwoCharCountryCode CHAR(2) ,ThreeCharCountryCode CHAR(3) ); INSERT INTO tbl_Countries VALUES (1,'Afghanistan','AF','AFG') ,(2,'Aland Islands','AX','ALA') ,(3,'Albania','AL','ALB') ,(4,'Algeria','DZ','DZA') ,(5,'American Samoa','AS','ASM') ,(6,'Andorra','AD','AND') ,(7,'Angola','AO','AGO') ,(8,'Anguilla','AI','AIA') ,(9,'Antarctica','AQ','ATA') ,(10,'Antigua and Barbuda','AG','ATG') ,(11,'Argentina','AR','ARG') ,(12,'Armenia','AM','ARM') ,(13,'Aruba','AW','ABW') ,(14,'Australia','AU','AUS') ,(15,'Austria','AT','AUT') ,(16,'Azerbaijan','AZ','AZE') ,(17,'Bahamas','BS','BHS') ,(18,'Bahrain','BH','BHR') ,(19,'Bangladesh','BD','BGD') ,(20,'Barbados','BB','BRB') ,(21,'Belarus','BY','BLR') ,(22,'Belgium','BE','BEL') ,(23,'Belize','BZ','BLZ') ,(24,'Benin','BJ','BEN') ,(25,'Bermuda','BM','BMU') ,(26,'Bhutan','BT','BTN') ,(27,'Bolivia','BO','BOL') ,(28,'Bonaire, Sint Eustatius and Saba','BQ','BES') ,(29,'Bosnia and Herzegovina','BA','BIH') ,(30,'Botswana','BW','BWA') ,(31,'Bouvet Island','BV','BVT') ,(32,'Brazil','BR','BRA') ,(33,'British Indian Ocean Territory','IO','IOT') ,(34,'Brunei','BN','BRN') ,(35,'Bulgaria','BG','BGR') ,(36,'Burkina Faso','BF','BFA') ,(37,'Burundi','BI','BDI') ,(38,'Cambodia','KH','KHM') ,(39,'Cameroon','CM','CMR') ,(40,'Canada','CA','CAN') ,(41,'Cape Verde','CV','CPV') ,(42,'Cayman Islands','KY','CYM') ,(43,'Central African Republic','CF','CAF') ,(44,'Chad','TD','TCD') ,(45,'Chile','CL','CHL') ,(46,'China','CN','CHN') ,(47,'Christmas Island','CX','CXR') ,(48,'Cocos (Keeling) Islands','CC','CCK') ,(49,'Colombia','CO','COL') ,(50,'Comoros','KM','COM') ,(51,'Congo','CG','COG') ,(52,'Cook Islands','CK','COK') ,(53,'Costa Rica','CR','CRI') ,(54,'Ivory Coast','CI','CIV') ,(55,'Croatia','HR','HRV') ,(56,'Cuba','CU','CUB') ,(57,'Curacao','CW','CUW') ,(58,'Cyprus','CY','CYP') ,(59,'Czech Republic','CZ','CZE') ,(60,'Democratic Republic of the Congo','CD','COD') ,(61,'Denmark','DK','DNK') ,(62,'Djibouti','DJ','DJI') ,(63,'Dominica','DM','DMA') ,(64,'Dominican Republic','DO','DOM') ,(65,'Ecuador','EC','ECU') ,(66,'Egypt','EG','EGY') ,(67,'El Salvador','SV','SLV') ,(68,'Equatorial Guinea','GQ','GNQ') ,(69,'Eritrea','ER','ERI') ,(70,'Estonia','EE','EST') ,(71,'Ethiopia','ET','ETH') ,(72,'Falkland Islands (Malvinas)','FK','FLK') ,(73,'Faroe Islands','FO','FRO') ,(74,'Fiji','FJ','FJI') ,(75,'Finland','FI','FIN') ,(76,'France','FR','FRA') ,(77,'French Guiana','GF','GUF') ,(78,'French Polynesia','PF','PYF') ,(79,'French Southern Territories','TF','ATF') ,(80,'Gabon','GA','GAB') ,(81,'Gambia','GM','GMB') ,(82,'Georgia','GE','GEO') ,(83,'Germany','DE','DEU') ,(84,'Ghana','GH','GHA') ,(85,'Gibraltar','GI','GIB') ,(86,'Greece','GR','GRC') ,(87,'Greenland','GL','GRL') ,(88,'Grenada','GD','GRD') ,(89,'Guadaloupe','GP','GLP') ,(90,'Guam','GU','GUM') ,(91,'Guatemala','GT','GTM') ,(92,'Guernsey','GG','GGY') ,(93,'Guinea','GN','GIN') ,(94,'Guinea-Bissau','GW','GNB') ,(95,'Guyana','GY','GUY') ,(96,'Haiti','HT','HTI') ,(97,'Heard Island and McDonald Islands','HM','HMD') ,(98,'Honduras','HN','HND') ,(99,'Hong Kong','HK','HKG') ,(100,'Hungary','HU','HUN') ,(101,'Iceland','IS','ISL') ,(102,'India','IN','IND') ,(103,'Indonesia','ID','IDN') ,(104,'Iran','IR','IRN') ,(105,'Iraq','IQ','IRQ') ,(106,'Ireland','IE','IRL') ,(107,'Isle of Man','IM','IMN') ,(108,'Israel','IL','ISR') ,(109,'Italy','IT','ITA') ,(110,'Jamaica','JM','JAM') ,(111,'Japan','JP','JPN') ,(112,'Jersey','JE','JEY') ,(113,'Jordan','JO','JOR') ,(114,'Kazakhstan','KZ','KAZ') ,(115,'Kenya','KE','KEN') ,(116,'Kiribati','KI','KIR') ,(117,'Kosovo','XK','---') ,(118,'Kuwait','KW','KWT') ,(119,'Kyrgyzstan','KG','KGZ') ,(120,'Laos','LA','LAO') ,(121,'Latvia','LV','LVA') ,(122,'Lebanon','LB','LBN') ,(123,'Lesotho','LS','LSO') ,(124,'Liberia','LR','LBR') ,(125,'Libya','LY','LBY') ,(126,'Liechtenstein','LI','LIE') ,(127,'Lithuania','LT','LTU') ,(128,'Luxembourg','LU','LUX') ,(129,'Macao','MO','MAC') ,(130,'Macedonia','MK','MKD') ,(131,'Madagascar','MG','MDG') ,(132,'Malawi','MW','MWI') ,(133,'Malaysia','MY','MYS') ,(134,'Maldives','MV','MDV') ,(135,'Mali','ML','MLI') ,(136,'Malta','MT','MLT') ,(137,'Marshall Islands','MH','MHL') ,(138,'Martinique','MQ','MTQ') ,(139,'Mauritania','MR','MRT') ,(140,'Mauritius','MU','MUS') ,(141,'Mayotte','YT','MYT') ,(142,'Mexico','MX','MEX') ,(143,'Micronesia','FM','FSM') ,(144,'Moldava','MD','MDA') ,(145,'Monaco','MC','MCO') ,(146,'Mongolia','MN','MNG') ,(147,'Montenegro','ME','MNE') ,(148,'Montserrat','MS','MSR') ,(149,'Morocco','MA','MAR') ,(150,'Mozambique','MZ','MOZ') ,(151,'Myanmar (Burma)','MM','MMR') ,(152,'Namibia','NA','NAM') ,(153,'Nauru','NR','NRU') ,(154,'Nepal','NP','NPL') ,(155,'Netherlands','NL','NLD') ,(156,'New Caledonia','NC','NCL') ,(157,'New Zealand','NZ','NZL') ,(158,'Nicaragua','NI','NIC') ,(159,'Niger','NE','NER') ,(160,'Nigeria','NG','NGA') ,(161,'Niue','NU','NIU') ,(162,'Norfolk Island','NF','NFK') ,(163,'North Korea','KP','PRK') ,(164,'Northern Mariana Islands','MP','MNP') ,(165,'Norway','NO','NOR') ,(166,'Oman','OM','OMN') ,(167,'Pakistan','PK','PAK') ,(168,'Palau','PW','PLW') ,(169,'Palestine','PS','PSE') ,(170,'Panama','PA','PAN') ,(171,'Papua New Guinea','PG',.png'>ASP.NET Core application

google formt berechnete felder

Follow these steps to create an ASP.NET Core application.

Step 1

In Visual Studio 2019, click on File -> New -> Project.

This is image title

Step 2

Choose the Create option and select the ASP.NET web application.

This is image title

Step 3

Select Web API and click Ok.

This is image title

Step 4

Now right click on the controller and add a new item.

This is image title

Step 5

Choose Ado.net Entity Data Model, then click on Add

This is image title

Wo kann man Akita-Inu-Münzen kaufen?

Step 6

Next Step is EF Designer, just click on next.

This is image title

Step 7

A new pop-up will show. Click on next. If your’s isn’t established, then click on a new connection

This is image title

This is image title

Step 8

Copy your database connection server name and paste it in the server name textbox. You will see all the databases, select your database and click on OK.

This is image title

Step 9

Here, in the new screen, select your tables and store the procedure. Then click on finish.

Wo kann man zwinker Krypto kaufen?

This is image title

Our next step is to right-click on the Controllers folder and add a new controller. Name it CountryController and add the following namespace in the Countrycontroller.

Complete Countrycontroller code

using System.Linq; using System.Web.Http; using CompanyDetails.Entities; namespace CountryDetails.Controllers { [RoutePrefix('api/Country')] public class CountryController : ApiController { CountryEntities5 DB = new CountryEntities5(); [HttpGet] [Route('getSearchedCountry')] public object getSearchedCountry(string keyword) { var countryResult = DB.searchCountryByName(keyword).ToList(); return countryResult; } } } 

VORDERES ENDE

Schritt 1

Erstellen wir mit dem folgenden NPM-Befehl ein neues Angular-Projekt:

ng new observablevspromise

Schritt 2

Lassen Sie uns nun eine neue Komponente für 'Observable ' erstellen, indem Sie den folgenden Befehl verwenden:

ng g c observable-example

Schritt 3

Lassen Sie uns nun eine neue Komponente für Promise erstellen, indem Sie den folgenden Befehl verwenden:

ng g c promise-example

Hier erstelle ich zwei verschiedene Komponenten, eine als beobachtbares Beispiel und eine andere als Versprechen.

Zuerst sehen wir das Beispiel für Promise.

Schritt 4

Öffnen Sie nun die Datei Promise-Example.component.html und fügen Sie den folgenden Code in die Datei ein:

Country Name Search

  • {{result.CountryName}}
  • Schritt 10

    Öffnen Sie nun die Datei observable-example.component.ts und fügen Sie den folgenden Code in diese Datei ein

    import { Component, OnInit } from '@angular/core'; import { CountryService } from '../country.service'; import { FormControl } from '@angular/forms'; import 'rxjs/add/operator/debounceTime'; import 'rxjs/add/operator/distinctUntilChanged'; @Component({ selector: 'app-observable-example', templateUrl: './observable-example.component.html', styleUrls: ['./observable-example.component.css'] }) export class ObservableExampleComponent implements OnInit { country: any; constructor(private _countryService:CountryService) { } private term =new FormControl(); ngOnInit() { this.term.valueChanges .debounceTime(400) .distinctUntilChanged() .subscribe(searchText=>{ this._countryService.getSearchedCountry(searchText).subscribe((result)=>{ console.log(result); this.country =result; }) }) } }

    Schritt 11

    Ersetzen Sie die Datei app.component.html durch den folgenden Code.

    Jetzt ist es Zeit für die Ausgabe für Observable,

    reagieren horizontale Scroll-Karten

    Das ist der Bildtitel

    Wie wir sehen, wird die API alle 400 Millisekunden gedrückt, sobald ich die Taste drücke

    Mit Hilfe von RxJS-Operatoren können wir dies erreichen, um unsere Anwendungsleistung zu verbessern.

    Abschluss

    In diesem Artikel haben wir den Unterschied zwischen Observable und Promise in Angular 8 Application gesehen. Vielen Dank fürs Lesen!

    #eckig #eckig 8