What is Promise in Angular Development?

1
(No Transcript)
2
Promise in Angular Development

• The computer language JavaScript was developed to
  provide interactivity to web pages. The callback
  functions in JavaScript coding, however, provide
  a significant challenge for developers. The
  reason is that when visitors interact with a web
  page, they must cope with asynchronous events.
• Many developers found these callback routines to
  be a hassle, especially when using JavaScript to
  create intricate and rich programmes for
  contemporary browsers. To overcome such
  complexity, ES6 introduced Promises, a modern and
  powerful abstraction for writing asynchronous
  code in a better and easily maintainable way.
• This presentation will explain what a promise is
  in an Angular application and introduce you to
  the idea of JavaScript promises, which were first
  introduced in ES6.

3
What is Promise in JavaScript?

• A promise is a JavaScript or TypeScript object
  that may produce a value at some point in time. A
  promise may be in one of 4 possible states
• fulfilled The action relating to the promise
  succeeded
• rejected The action relating to the promise
  failed just because an error occurs during
  promise implementation
• pending Its an initial state that hasnt
  fulfilled or rejected yet
• settled Has fulfilled or rejected

4
How To Create a Promise in JavaScript?

• The developers from the leading AngularJS
  development company implements Promises by
  calling the then() and catch() methods.
• then() method It takes two callback functions as
  parameters and is invoked when a promise is
  either resolved or rejected.
• catch() method It takes one callback function
  and is invoked when an error occurs.

5
What is Promise in Angular?

• When working with asynchronous actions like an
  HTTP request, AngularJS developers are sceptical
  of when they will receive a response from the
  server. By default, Javascript is a programming
  language that is Synchronous Blocking and
  Single-threaded language.
• Simply put, we may state that only one code can
  be processed by the Javascript engine at a time
  in a single thread. Hence, when a thread is
  blocked, we are unable to execute other blocked
  code, which slows down JS and prevents it from
  performing multiple actions.
• On the other hand, code becoming non blocking is
  entirely the result of the asynchronous activity.
  That means that it enables developers to run many
  pieces of code simultaneously.

6

• In the Angular framework, the developers can
  quickly achieve asynchronous by utilising the
  following method.
• The Callback function
• The Promise from Javascript can be used in
  Angular.
• Observable using Rxjs library in Angular Library
  for reactive programming using Observables.
• Additionally, developers can swiftly shift the
  code to the following line by allowing the user
  interface to stay responsive while dealing with
  an asynchronous activity. As HTTP requests and
  other asynchronous actions are carried out in the
  background, the user keeps working on the
  application.
• Now Angular's Promise notion enters the scene.
  Javascript's promise is just a task wrapped in an
  asynchronous operation that receives
  notifications whenever it is successful or
  unsuccessful in the future.
• As the developer executes the Promise, one of two
  things can happen the Promise is successful or
  fails. Developers may deal with easy-to-read and
  write code using the async and await keywords
  with Promise, and we can also utilise "try and
  catch" for error management (async await).

7
Angular Promise Example

• Time to examine promises' use in Angular
  development. With Angular CLI, we will start by
  building a straightforward Angular application.
• ng new angular-promise-example routingfalse
  stylecss
• By using this command, a fresh Angular
  application will be created with no routing and a
  CSS stylesheet format. To send API queries to web
  servers to produce or fetch data, we will next
  configure HttpClient.
• Since you must always wait a certain length of
  time before receiving the requested data,
  fetching data is a typical asynchronous process.
  HttpClient can be used in Angular programming to
  fetch data.
• We'll show how to use JavaScript/ES6 Promises in
  place of RxJS Observables, which are how
  HttpClient handles asynchronous operations.

8

• In the app/app.module.ts file of your project,
  add the following changes

• Next, open the src/app/app.component.ts file and
  add the following code to send a HTTP GET request
  and process the response using a Promise in
  Angular.

9
(No Transcript)
10

• We import HttpClient and inject it via the
  component constructor and use it to send the HTTP
  request.
• Next, we call the get() method to send the
  request and the toPromise() method to convert the
  returned RxJS Observable to a promise.

11

• In the ngOnInit() life-cycle method, we send the
  actual request by calling the then() method of
  the promise as follows

• If the promise is resolved successfully we simply
  output the data in the console and in case of an
  error we display the error.

12
Conclusion

• I trust that now you have a good understanding of
  what Promise in Angular development is. In
  addition, we saw the ES6-introduced JavaScript
  Promises concept. JavaScript promises that can be
  specifically incorporated into the application
  have been put into practice.
• Also, we came upon the Angular application
  example of constructing a promise. Nonetheless,
  Angular is the greatest and most popular choice
  if you have any questions about developing web
  applications. It enables you to create
  applications for various business sectors.

13
THANK YOU
Contact Us (91) 991-308-8360 / 1 (912)
528-5566 inquiry_at_albiorixtech.com livealbiorix.te
ch For More Information Visit Us
At www.albiorixtech.com