SharePoint 2016 Tutorial Contents
2. How to install PnP-JS-Core
– Add the npm package to your project:
– npm install sp-pnp-js –save
3. How to import library in your project:
Also read an SharePoint Framework SPFX turotial: Tutorial on how to create SPFx webPart with ReactJS for SharePoint 2016 On-Premise environment
4. First or second way?
Below is a typical example of promise handling using the fetch api.
As you can tell there is a lot going on here:
First we call fetch to trigger the http call. Next we have to deal with two layers of chained ‘then’ calls to unwrap and print the person’s full name.
Async – await
Next I will show how you can use async/await as an alternative to ‘then’ based promise handling.
On of the benefits of async/await is that it makes asynchronous code appear more like synchronous code. It’s important to keep in mind that this is just syntactic sugar though. Under the hood the code is still asynchronous In the following code I have rewritten the original function using async/await.
The first thing to notice is that the code is a lot less verbose. We no longer have to deal with ‘then’ functions and callbacks. Instead we use the await keyword to create the illusion of synchronous looking code.
Async/await is available in TypeScript as of version 2.1.
– async is a keyword for the function declaration
– await is used during the promise handling
– await must be used within an async function, though Chrome now supports “top level” await
– async functions return a promise, regardless of what the return value is within the function
– async/await and promises are essentially the same under the hood
– Available now in most browsers as well as Node.js
Benefits of async and await
– Your code is more simplistic, precise
– Debugging is easier thanks to less callbacks
– Conversion from promise then / catch code is easy
– Your code can be more “top down”, less nesting