Use JavaScript Core Library with SharePoint Framework (Async or await and normal promises)

In this SPFx tutorial, we will discuss how to use the JavaScript core library with SharePoint framework (SPFx) in SharePoint Online.

What is JavaScript Core Library (PnP-JS-Core)

The Patterns and Practices(PnP) JavaScript Core Library was created to help developers by simplifying common operations within SharePoint and the SharePoint Framework.

Currently, it contains a fluent API for working with the full SharePoint REST API as well as utility and helper functions. This takes the guesswork out of creating REST requests, letting developers focus on the what and less on the how.

How to install PnP-JS-Core

Add the npm package to your project:

npm install sp-pnp-js –save
create sharepoint framework webpart
create sharepoint framework webpart

How to import a library in your project

Use JavaScript Core Library with SharePoint Framework
Use JavaScript Core Library with SharePoint Framework

First or second way?

Asynchronous execution is one of the most important features of JavaScript. It’s also one of the features many developers seem to struggle with.

In my experience, improper handling of asynchronous code is the main source of bugs in JavaScript applications.

Most of the asynchronous bugs I see are related to promises. Probably because promise handling can get complicated if you’re not careful.

Below is a typical example of promise handling using the fetch api.

How to Get Started with the SharePoint Framework
How to Get Started with the SharePoint Framework

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.

sharepoint framework client web part
sharepoint framework client web part

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.

Quick Basics

  • 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 fewer callbacks
  • Conversion from promise then / catch code is easy
  • Your code can be more “top-down”, less nesting

You may like following SPFx tutorials: